<template>
  <div class="page">
    <div class="top">
      <div class="left"></div>
      <div class="right">
        <el-button type="primary" size="mini" @click="openDialog('新增主题')" v-if="showButtons.add"><i class="iconfont icon-add"></i>新增
        </el-button>
      </div>
    </div>
    <el-table border v-loading="loading" :data="tableData" max-height="500px">
      <el-table-column prop="title" label="标题" align="center">
      </el-table-column>
      <el-table-column prop="subjectName" label="主题分类" align="center">
        <template slot-scope="scope">
          <div v-for="(item,key) in themeClass" :key="key">
            <div v-if="scope.row.subjectId===item.id">{{item.name}}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createdBy" label="创建人" align="center">
      </el-table-column>
      <el-table-column width="300" prop="createdDate" label="创建时间" align="center">
      </el-table-column>
      <el-table-column width="120" prop="state" label="状态" align="center">
        <template slot-scope="scope">
          <div>
            <el-tag :type="scope.row.state | statusFilter" size="small" effect="dark">
              {{ scope.row.state | statusName }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="200">
        <template slot-scope="scope">
          <el-dropdown :divided='true' size="mini" split-button @click="edit(scope.row)" type="text">
            <span style="color:#1890ff;font-weight:700;font-size:12px" v-if="showButtons.edit">修改</span>
            <!-- primary -->
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button type="text" size="mini" @click="catalogue(scope.row.id)" v-if="showButtons.set"
                  style="color:#ffba00;font-weight:700;font-size:13px">目录设置
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button type="text" size="mini" @click="deleteClick(scope.row)"
                  style="color:#ff4949;font-size:13px;font-weight:700" v-if="showButtons.del"> 删除</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button type="text" size="mini" @click="onConfirm(scope.row)" v-if="showButtons.examine"
                  style="color:#13ce66;font-weight:700;font-size:13px">
                  审核</el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange"
      layout="total, prev, pager, next, sizes" :page-size="pagination.pageSize" :page-sizes="[10, 20, 30, 50]"
      :current-page="pagination.pageNum" :total="pagination.total">
    </el-pagination>

    <el-dialog v-dialogDrag width="35%" ref="dia" :title="title" :visible.sync="dialogVisible" append-to-body
      :close-on-click-modal="false">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="主题标题" prop="title">
          <el-input v-model="ruleForm.title" size="mini" clearable></el-input>
        </el-form-item>
        <el-form-item label="主题分类" prop="class">
          <el-select v-model="ruleForm.subjectId" style="width:100%" :disabled="title == '修改主题'" size="mini" clearable>
            <el-option v-for="(item, index) in themeClass" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="问问" v-if="ruleForm.class === 3">
          <el-input v-model="ruleForm.ask" size="mini" clearable></el-input>
        </el-form-item> -->
      </el-form>
      <div class="sub-btnsub-btn">
        <el-button type="primary" size="mini" @click="submitForm('ruleForm')"><i class="iconfont icon-baocun"></i>保存
        </el-button>
        <el-button type="info" size="mini" @click="dialogVisible = false"><i class="iconfont icon-error"></i>取消
        </el-button>
      </div>
    </el-dialog>
    <transition>
      <catalog :catalogueDia="catalogueDia" :formCata="formCata" :btnFlage="btnFlage" :formFlage="formFlage"
        :rowId="rowId" @cancel="cancel" @catalogue="catalogue" :treeData="treeData" />
    </transition>
  </div>
</template>

<script>
  import catalog from "./catalogueDia";
  import {
    message,
    clearObjValue
  } from "@/utils/common";
  import {
    mapState
  } from "vuex";
  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          0: "success",
          1: "success",
          2: "success",
          3: "success",
        };
        return statusMap[status];
      },
      statusName(status) {
        const statusMap = {
          0: "新建目录",
          1: "内容编写中",
          2: "文案排版中",
          3: "success",
        };
        return statusMap[status];
      },
    },
    computed: {
      ...mapState({
        treeData: (state) => state.editingTopics.treeData,
      }),
    },
    data() {
      return {
        rowId: "", // 目录一行的id
        dialogVisible: false,
        title: "新增主题",
        catalogueDia: false,

        rules: {
          title: [{
            required: true,
            message: "请输入主题标题",
            trigger: "blur"
          }],
          subjectId: [{
            required: true,
            message: "请输入主题分类",
            trigger: "blur"
          }],
        },

        //任务分配弹框表格
        formCata: {
          topCata: "",
          topId: "",
          currentId: "",
          cataName: "",
          Number: "",
        },
        //任务分配按钮权限
        btnFlage: {
          add: true,
          edit: true,
          commit: true,
          del: true,
        },
        //表单权限
        formFlage: {
          All: true,
          select: true,
        },
      };
    },
    components: {
      catalog,
    },
    props: {
      loading: {
        type: Boolean,
        default: () => true,
      },
      tableData: {
        type: Array,
        default: () => [],
      },
      themeClass: {
        type: Array,
        default: () => [],
      },
      pagination: {
        type: Object,
        default: () => {},
      },
      ruleForm: {
        type: Object,
        default: () => {},
      },
      showButtons: {
        type: Object,
        default: () => {},
      },
    },
    methods: {
      handleCurrentChange(val) {
        this.pagination.pageNum = val;
        this.$emit("refreshTable");
      },
      handleSizeChange(val) {
        this.pagination.pageSize = val;
        this.pagination.pageNum = 1;
        this.$emit("refreshTable");
      },
      //新增
      openDialog(val) {
        this.title = val;
        clearObjValue(this.ruleForm);
        this.dialogVisible = true;
      },
      //修改
      edit(val) {
        this.title = "修改主题";
        let data = {
          id: val.id,
        };
        this.$store.dispatch('editingTopics/getInfo', data).then(res => {
          this.dialogVisible = true;
        })
      },
      //修改保存
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let data = {
              subjectId: this.ruleForm.subjectId,
              title: this.ruleForm.title,
            };
            if (this.title === "新增主题") {
              data.state = 0;
              data.createdBy = sessionStorage.getItem("username")
              this.themeClass.forEach((item) => {
                if (item.id === this.ruleForm.subjectId) {
                  data.subjectName = item.name;
                }
              });
              this.$store.dispatch('editingTopics/addTheme', data).then(res => {
                this.dialogVisible = false;
                message("success", "新增成功", 2000);
                this.$emit("getData");
              })
            } else {
              data.state = this.ruleForm.state;
              data.id = this.ruleForm.id;
              this.$store.dispatch('editingTopics/editTheme', data).then(res => {
                message("success", "修改成功", 2000);
                this.$emit("getData");
                this.dialogVisible = false;
              })
            }
          } else {
            return false;
          }
        });
      },

      deleteClick(val) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            let data = {
              id: val.id,
            };
            this.$store.dispatch('editingTopics/delTheme', data).then(res => {
              message("success", "删除成功", 2000);
              this.$emit("getData");
            })
          })
          .catch(() => {});
      },
      //目录设置
      catalogue(val) {
        this.rowId = val.toString();
        let data = {
          dataId: val,
          pId: -1,
        };
        this.$store.dispatch('editingTopics/getTree', data).then(res => {
          clearObjValue(this.formCata);
          for (let key in this.btnFlage) {
            this.btnFlage[key] = true;
          }
          for (let key in this.formFlage) {
            this.btnFlage[key] = true;
          }
          this.catalogueDia = true;
        })
      },
      //目录取消
      cancel() {
        this.catalogueDia = false;
      },
      onConfirm(val) {
        let data = {
          state: 2,
          id: val.id,
        };
        this.$confirm('此操作将审核该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('editingTopics/audit', data).then(res => {
            message("success", "审核成功", 2000);
            this.$emit("getData");
          })
        }).catch(() => {});
      },
      //确认审核
    },
  };

</script>

<style lang="scss" scoped>
  .page {
    width: 100%;
    margin-top: 10px;
    background-color: #fff;
    text-align: left;
    padding: 10px;
    box-sizing: border-box;

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    ::v-deep.caret-wrapper {
      //  .sort-caret{}
      border-bottom-color: #000;
    }
  }

  .sub-btnsub-btn {
    text-align: center;
  }

</style>
