<template>
  <div class="page">
    <LayoutTable :data="tableData" :config="tableConfig"  notDel />
  </div>
</template>

<script>
import table from "@/assets/mixins/table";

export default {
  components: {},
  mixins: [table],
   created() {

  },
  methods: {
    toDetail(row) {
      this.$router.push({
        path: "/matter/detail/list",
        query: { id: row.id },
      });
    },

    async toDatumn(row) {
      console.log("材料列表");

      try {
        this.$router.push({
          path: "/matter/datum/list",
          query: {
            "query.matterId": row.id,
          },
        });
      } catch (error) {
        this.$message.error(error.message);
      }
    },

    async toAccept(row) {
      console.log("受理条件");

      try {
        this.$router.push({
          path: "/matter/accept/list",
          query: {
            "query.matterId": row.id,
          },
        });
      } catch (error) {
        this.$message.error(error.message);
      }
    },

    async toFlow(row) {
      console.log("办理流程");

      try {
        this.$router.push({
          path: "/matter/flowlimit/list",
          query: {
            "query.matterId": row.id,
          },
        });
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    
    async toQustion(row) {
      console.log("常见问题");

      try {
        this.$router.push({
          path: "/matter/question/list",
          query: {
            "query.matterId": row.id,
          },
        });
      } catch (error) {
        this.$message.error(error.message);
      }
    },
  },
  data() {
    return {
      config: {
        search: [
          {
            name: "matterNo",
            type: "text",
            label: "事项编号",
            fuzzy: true,
          },
          {
            name: "matterName",
            type: "text",
            label: "事项名称",
            fuzzy: true,
          },
        ],
        columns: [
          { label: "事项编号", prop: "matterNo", width: 240 },
          { label: "事项名称", prop: "matterName", width: 320,tooltip:true },
          {
            label: "关联材料",
            prop: "datumList",
            formatter: (row) => {
              let listItems = [];

              if (row.datumList) {
                for (let i = 0; i < row.datumList.length; i++) {
                  let temp = (
                    <el-row>
                      <el-tag style="font-size:12px;white-space:pre-wrap;margin-bottom:5px">
                        {row.datumList[i].materialName}
                      </el-tag>
                    </el-row>
                  );
                  listItems.push(temp);
                }
              }
              return <span>{listItems}</span>;
            },
          },
          { label: "区域编码", prop: "areaCode", width: 120 },
          { label: "部门编号", prop: "deptCode", width: 160 },
           { label: "事项来源", prop: "source",width: 100, formatter: this.formatter },
          {
            label: "操作",
            width: 180,
            formatter: (row) => {
              return (
                <div>
                  <el-button
                    type="text"
                    size="mini"
                    onClick={() => {
                      this.toEdit(row);
                    }}
                  >
                    编辑
                  </el-button>
                  <span> </span>

                  <el-button
                    type="text"
                    size="mini"
                    onClick={() => {
                      this.toDatumn(row);
                    }}
                  >
                    关联材料
                  </el-button>

                  <span> </span>

                  <el-button
                    type="text"
                    size="mini"
                    onClick={() => {
                      this.toAccept(row);
                    }}
                  >
                    受理条件
                  </el-button>

                  <span> </span>

                  <el-button
                    type="text"
                    size="mini"
                    onClick={() => {
                      this.toFlow(row);
                    }}
                  >
                    办理流程
                  </el-button>

                  <span> </span>

                  <el-button
                    type="text"
                    size="mini"
                    onClick={() => {
                      this.toQustion(row);
                    }}
                  >
                    常见问题
                  </el-button>
                   {row.source == 1 ? (
                    <Confirm
                      onConfirm={() => {
                        this.toDel(row.id, 0);
                      }}
                      message="是否删除当前事项？"
                    >
                      <span>&nbsp;&nbsp;</span>
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                   
                        title="删除"
                      >删除</el-button>{" "}
                    </Confirm>
                  ) : (
                    ""
                  )}
                </div>
              );
            },
          },
        ],
      },
    };
  },
};
</script>