<template>
    <div class="approvalExamination-container">
      <simple-form
        :form="table_form"
        :handle="table_handle"
        @search="handleSearch"
        @track="handleVisible('track')"
        @batch="handleVisible('batch')"
      >
      </simple-form>
      <simple-table
        :list="table_list"
        :config="table_config"
        :loading="table_loading"
        :multiple="true"
        :handle-row="table_handle_row"
        @selection="handleaaa"
        @approve="handleApprove"
      ></simple-table>
      <simple-dialog
        title="审批"
        width="40%"
        @cancel="handleVisible('opinion')"
        @confirm="handleOpinion"
        :visible="opinion_visible"
      >
        <el-form
          label-width="80px"
          :model="opinion_form"
          ref="opinion_ref"
        >
          <el-form-item
            label="审批意见"
            prop="opinion"
            :rules="{
                        required: true,
                        message: '审批意见不能为空',
                        trigger: 'blur',
                    }"
          >
            <el-input
              :rows="8"
              type="textarea"
              v-model="opinion_form.opinion"
            ></el-input>
          </el-form-item>
        </el-form>
        <template v-slot:footer>
          <div>
            <el-button @click="handleVisible('opinion')" type="default">退回修改</el-button>
            <el-button @click="handleOpinion" type="primary">同意</el-button>
          </div>
        </template>
      </simple-dialog>
      <simple-dialog
        title="审批轨迹"
        :fullscreen="true"
        @cancel="handleVisible('track')"
        @confirm="handleConsent"
        :visible="track_visible"
      >
        <simple-table
          :list="table_list_track"
          :config="table_config_track"
          :loading="table_loading_track"
        ></simple-table>
        <template v-slot:footer>
          <div>
            <el-button @click="handleVisible('track')" type="default">退回修改</el-button>
            <el-button @click="handleConsent" type="primary">同意</el-button>
          </div>
        </template>
      </simple-dialog>
    </div>
</template>

<script>
import simpleForm from "./components/form.vue";
import simpleTable from "./components/table.vue";
import simpleDialog from "./components/dialog.vue";
// import simplePagination from "./components/pagination.vue";
export default {
  components: {
    simpleForm,
    simpleDialog,
    simpleTable,
    // simplePagination,
  },
  data() {
    return {
      // 审批意见
      opinion_visible: false,
      track_visible: false,
      opinion_form: {},
      table_form: [
        {
          label: "公司名称",
          props: "name",
          type: "input",
        },
        {
          label: "状态",
          props: "status",
          type: "select",
          // 0.待办  1.已办
          dictionary: [
            {
              label: "待办",
              value: "0",
            },
            {
              label: "已办",
              value: "1",
            },
          ],
        },
      ],
      table_loading: false,
      table_handle: [
        {
          label: "审批轨迹",
          props: "track",
        },
        {
          label: "批量审批",
          props: "batch",
        },
      ],
      // 列表数据
      table_list: [
        {
          number: 1,
          cpmName: "xq",
          person: "mll",
          phone: 132548648844,
          need: "xxxxxxxx",
          file: "附件1",
          status: 0,
        },
      ],
      // 表头配置
      table_config: [
        {
          label: "序号",
          props: "number",
        },
        {
          label: "公司名称",
          props: "cpmName",
        },
        {
          label: "提出人",
          props: "person",
        },
        {
          label: "联系电话",
          props: "phone",
        },
        {
          label: "网格划分需求",
          props: "need",
        },
        {
          label: "附件",
          props: "file",
        },
        {
          label: "状态",
          props: "status",
          type: "dictionary",
          dictionary: { 0: "待办", 1: "已办" },
        },
      ],
      //   表格里的操作按钮
      table_handle_row: [
        {
          label: "审批",
          props: "approve",
        },
        {},
        {},
      ],
      table_loading_track:false,
      // 审批轨迹内表数据
      table_list_track:[],
      // 审批轨迹内表头配置
      table_config_track: [
        {
          label: "编号",
          props: "number",
        },
        {
          label: "流程环节",
          props: "cpmName",
        },
        {
          label: "处理人",
          props: "person",
        },
        {
          label: "处理工号",
          props: "number",
        },
        {
          label: "处理时间",
          props: "createTime",
          type: "date",
        },
        {
          label: "审批意见",
          props: "status",
          type: "dictionary",
          dictionary: { 0: "同意", 1: "不同意" },
        },
      ],
    };
  },
  methods: {
    handleSearch() {},
    handleVisible(props) {
      switch (props) {
        case "opinion":
          this.opinion_visible = !this.opinion_visible;
          break;
        case "track":
          this.track_visible = !this.track_visible;
          break;
        case "batch":
          this.opinion_visible = !this.opinion_visible;
          break;
      }
    },
    handleaaa(val) {
      console.log(val);
    },
    handleApprove() {
      this.handleVisible("opinion");
    },
    handleOpinion() {
      this.handleVisible('opinion')
    },
    handleConsent() {
      this.handleVisible('track')
    },
  },
};
</script>

<style lang="scss" scoped>
.approvalExamination-container {
  background: #ffffff;
  padding: 0 20px;
  padding-top: 20px;
  margin: 15px;
  overflow: auto;
  width: calc(100% - 30px);
  max-width: calc(100% - 30px);
  height: 100%;
  overflow-x: hidden;
}
::v-deep .el-row {
  padding-bottom: 12px;
}
</style>