<template>
  <div class="page">
    <LayoutTable :data="tableData" :config="tableConfig" />
    <!-- 查看二维码弹窗 -->

    <el-dialog title="一次办二维码" :visible.sync="qrCodeDialog.visible" width="350px">
      <img :src="qrCodeDialog.qrCode" />
      <p style="word-wrap: break-word">{{ qrCodeDialog.qrCodeUrl }}</p>
    </el-dialog>
  </div>
</template>

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

export default {
  name: "basics",
  components: {},
  mixins: [table],
  created() {},
  methods: {
    async viewQrCode(id) {
      try {
        const { qrCode, qrCodeUrl } = await this.$post("/basics/viewQrCode", {
          "entity.id": id,
        });
        this.qrCodeDialog.qrCode = qrCode;
        this.qrCodeDialog.qrCodeUrl = qrCodeUrl;
        this.qrCodeDialog.visible = true;
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    handPlatform(row) {
      this.$router.push({
        path: "/basics/index",
        query: { basicsId: row.id },
      });
    },
    async handAddBaseInfo(row) {
      try {
        this.$router.push({
          path: "/basics/info/list",
          query: {
            basicsId: row.id
          },
        });
      } catch (error) {
        this.$message.error(error.message);
      }
    },

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

    async handAddFlow(row) {
      try {
        this.$router.push({
          path: "/flowlimit/list",
          query: {
            basicsId: row.id
          },
        });
      } catch (error) {
        this.$message.error(error.message);
      }
    },
  },
  data() {
    return {
      qrCodeDialog: {
        visible: false,
        qrCode: "",
        qrCodeUrl: "",
      },
      config: {
        search: [],
        columns: [
          { type: "selection", width: 60 },
          { label: "一件事标题", prop: "tname" },
          {
            label: "二维码",
            prop: "qrcode",
            formatter: (row) => {
              return (
                <el-button
                  type='text'
                  onClick={() => {
                    this.viewQrCode(row.id);
                  }}>
                  二维码
                </el-button>
              );
            },
          },
          {
            label: "创建时间",
            prop: "createTime",
            formatter: this.formatterDate,
          },
          {
            label: "操作",
            width: 320,
            formatter: (row) => {
              return (
                <div>
                  <el-row>
                    <el-button
                      size='mini'
                      icon='el-icon-edit'
                      size='mini'
                      onClick={() => {
                        this.toEdit(row);
                      }}>
                      编辑
                    </el-button>
                    <span> </span>

                    <el-button
                      size='mini'
                      icon='el-icon-edit-outline'
                      size='mini'
                      onClick={() => {
                        this.handPlatform(row);
                      }}>
                      事项工作台
                    </el-button>

                    <span> </span>

                    <el-button
                      size='mini'
                      icon='el-icon-edit-outline'
                      size='mini'
                      onClick={() => {
                        this.handAddBaseInfo(row);
                      }}>
                      基本信息
                    </el-button>

                    <span> </span>
                  </el-row>
                  <el-row style='margin-top:10px'>
                    <el-button
                      size='mini'
                      icon='el-icon-edit-outline'
                      size='mini'
                      onClick={() => {
                        this.handAddApplyCondition(row);
                      }}>
                      申请条件
                    </el-button>

                    <span> </span>

                    <el-button
                      size='mini'
                      icon='el-icon-edit-outline'
                      size='mini'
                      onClick={() => {
                        this.handAddFlow(row);
                      }}>
                      办理流程
                    </el-button>

                    <span> </span>

                    <Confirm message='确定要删除该事件吗？' onConfirm={() => this.toDel(row.id)}>
                      <el-button size='mini' icon='el-icon-delete' size='mini'>
                        删除
                      </el-button>
                    </Confirm>

                    <span> </span>
                  </el-row>
                </div>
              );
            },
          },
        ],
      },
    };
  },
};
</script>