<template>
  <div class="container">
    <div class="select">
      <el-form>
        <el-form-item label="选择具体的审批流程">
          <el-select v-model="type" @change="headChange()">
            <el-option
              v-for="item in process"
              :key="item.type"
              :label="item.label"
              :value="item.type"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 70%" border>
        <el-table-column label="工作项" prop="title" align="center" />
        <el-table-column label="处理角色" align="center" prop="content">
          <template slot-scope="scope">

            <div v-if="scope.row.content == 0">保管员</div>
            <!-- <div v-else>{{scope.row}}</div> -->

            <el-select
              v-else
              v-model="scope.row.content"
              placeholder="请选择审批人"
            >
              <el-option
                v-for="item in scope.row.approverSelect"
                :key="item.uId"
                :label="item.personnelName"
                :value="item.uId"
              />
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="btns">
      <el-button type="success" @click="btnSave()">保存</el-button>
    </div>
  </div>
</template>
<script>
import {
  roleList,
  approverSubmit,
  checkList,
} from "@/api/system/userManagement/approver"
export default {
  name: "ApproverManagement",
  data() {
    return {
      //存储用户信息
      userInfo: {},
      //库id
      depotId: 1,
      roleArr: [],
      //角色id
      rolesId: "2,3",
      //初始化审批人下拉选
      approverSelect: [],
      // 表格数据初始化
      tableData: [],
      // 头部下拉选的值
      type: "tf",

      // 流程下拉选
      process: [
        {
          label: "机械通风",
          type: "tf",
        },
        {
          label: "熏蒸",
          type: "xz",
        },
        {
          label: "药剂采购",
          type: "yjcg",
        },
        {
          label: "药剂领用",
          type: "yjly",
        },
        {
          label: "设备采购",
          type: "sbcg",
        },
        {
          label: "设备领用归还",
          type: "sblygh",
        },
        {
          label: "设备维修",
          type: "sbwx",
        },
        {
          label: "设备报废",
          type: "sbbf",
        },
        {
          label: "设施维修改造",
          type: "sbwxgz",
        },
      ],

      // 机械通风数据
      meVentilation: [
        {
          step: "1",
          form: "container",
          title: "制定通风方案",
          content: 0,
        },
        {
          step: "2",
          form: "select",
          title: "主管科长审批",
          content: null,
          approverSelect: [],
        },
        {
          step: "3",
          form: "select",
          title: "分管副总经理审批",
          content: null,
          approverSelect: [],
        },
        {
          step: "4",
          form: "container",
          title: "通风方案实施",
          content: 0,
        },
      ],
      // 熏蒸数据

      fumigation: [
        {
          step: "1",
          type: "container",
          title: "制定熏蒸计划",
          content: "保管员",
        },
        {
          step: "2",
          type: "select",
          title: "熏蒸计划主管科长审批",
          content: "",
        },
        {
          step: "3",
          type: "select",
          title: "熏蒸计划分管副总经理审批",
          content: "",
        },
        {
          step: "4",
          type: "container",
          title: "熏蒸计划总经理审批",
          content: "总经理（刘亮）",
        },
        {
          step: "5",
          type: "select",
          title: "熏蒸计划分公司主管处室审批",
          content: "",
        },

        {
          step: "6",
          type: "container",
          title: "熏蒸计划报备与实施",
          content: "保管员",
        },

        {
          step: "7",
          type: "container",
          title: "提交散气作业申请",
          content: "保管员",
        },
        {
          step: "8",
          type: "select",
          title: "散气作业主管科长审批",
          content: "",
        },
        {
          step: "9",
          type: "select",
          title: "散气作业分管副总经理",
          content: "",
        },
      ],

      //  药剂采购
      drugPurchase: [
        {
          step: "1",
          type: "container",
          title: "采购申请提交",
          content: "药剂保管员",
        },
        {
          step: "2",
          type: "select",
          title: "主管科长审批",
          content: "",
        },
        {
          step: "3",
          type: "select",
          title: "分管副总经理审批",
          content: "",
        },
        {
          step: "4",
          type: "container",
          title: "总经理审批",
          content: "总经理（刘亮）",
        },
        {
          step: "5",
          type: "select",
          title: " 分公司主管处室审批",
          content: "",
        },
      ],

      // 药剂领用

      drugCollect: [
        {
          step: "1",
          type: "container",
          title: "填写药品领用单",
          content: "保管员",
        },
        {
          step: "2",
          type: "select",
          title: "主管科长审批",
          content: "",
        },
        {
          step: "3",
          type: "select",
          title: "分管副总经理审批",
          content: "",
        },
        {
          step: "4",
          type: "container",
          title: "药剂领用",
          content: "保管员",
        },
      ],

      // 设备采购
      devicePurchase: [
        {
          step: "1",
          type: "container",
          title: "制定采购计划",
          content: "设备设施保管员",
        },
        {
          step: "2",
          type: "select",
          title: "主管科长审批",
          content: "",
        },
        {
          step: "3",
          type: "select",
          title: "分管副总经理审批",
          content: "",
        },
        {
          step: "4",
          type: "container",
          title: "总经理审批",
          content: "总经理（张立）",
        },

        {
          step: "5",
          type: "select",
          title: "分公司审批",
          content: "",
        },

        {
          step: "6",
          type: "container",
          title: "采购计划执行",
          content: "设备设施保管员",
        },
      ],

      // 设备领用归还
      deviceCollectReturn: [
        {
          step: "1",
          type: "select",
          title: "主管科长审批",
          content: "",
        },
        {
          step: "2",
          type: "select",
          title: "分管副总经理审批",
          content: "",
        },
      ],

      // 设备维修
      deviceRepair: [
        {
          step: "1",
          type: "container",
          title: "制定维修计划",
          content: "设备设施保管员",
        },
        {
          step: "2",
          type: "select",
          title: "主管科长审核",
          content: "",
        },
        {
          step: "3",
          type: "select",
          title: "分管副总经理审核",
          content: "",
        },
        {
          step: "4",
          type: "container",
          title: "总经理审批",
          content: "总经理（张立）",
        },

        {
          step: "5",
          type: "select",
          title: "分公司审批",
          content: "",
        },

        {
          step: "6",
          type: "container",
          title: "维修计划执行",
          content: "设备设施保管员",
        },
      ],

      // 设备报废
      deviceScrap: [
        {
          step: "1",
          type: "container",
          title: "制定报废计划",
          content: "设备设施保管员",
        },
        {
          step: "2",
          type: "select",
          title: "主管科长审核",
          content: "",
        },
        {
          step: "3",
          type: "select",
          title: "分管副总经理审核",
          content: "",
        },
        {
          step: "4",
          type: "container",
          title: "总经理审批",
          content: "总经理（张立）",
        },

        {
          step: "5",
          type: "select",
          title: "分公司审批",
          content: "",
        },

        {
          step: "6",
          type: "container",
          title: "报废计划执行",
          content: "设备设施保管员",
        },
      ],

      // 设备维修改造
      deviceRepairReform: [
        {
          step: "1",
          type: "container",
          title: "制定维修计划",
          content: "设备设施保管员",
        },
        {
          step: "2",
          type: "select",
          title: "维修计划主管科长审核",
          content: "",
        },
        {
          step: "3",
          type: "select",
          title: " 维修计划分管副总经理审核",
          content: "",
        },
        {
          step: "4",
          type: "container",
          title: "维修计划总经理审批",
          content: "总经理（张立）",
        },

        {
          step: "5",
          type: "select",
          title: "维修计划分公司审批",
          content: "",
        },

        {
          step: "6",
          type: "container",
          title: "制定维修预算",
          content: "设备设施保管员",
        },

        {
          step: "7",
          type: "select",
          title: "维修预算主管科长审核",
          content: "",
        },

        {
          step: "8",
          type: "select",
          title: "维修预算分管副总经理审核",
          content: "",
        },

        {
          step: "9",
          type: "container",
          title: "维修预算总经理审批",
          content: "总经理（张立）",
        },

        {
          step: "10",
          type: "select",
          title: "维修预算分公司审批",
          content: "",
        },

        {
          step: "11",
          type: "container",
          title: "维修计划实施",
          content: "设备设施保管员",
        },
      ],
    }
  },

  methods: {
    //根据库id,角色查询用户下拉选
    getRoleSelect() {
      var params = {
        depotId: 1,
        roleIds: this.rolesId,
      }
      console.log(params, "params...")
      roleList(params)
        .then((res) => {
          if (res.code == 200) {
            console.log(res.data, "下拉选")
            console.log(this.tableData, "????????????????????????")

            this.tableData.forEach((item) => {
              if (item.title.indexOf("科长") != -1) {
                // item.approverSelect = res.data[2]
                 this.$set(item,'approverSelect',res.data[2]);   //
              } else if (item.title.indexOf("总经理") != -1) {
                // item.approverSelect = res.data[3]
                 this.$set(item,'approverSelect',res.data[3]);
              }
            })

            // this.$forceUpdate();
            //this.tableData = JSON.parse(JSON.stringify(this.tableData));
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 头部下拉选的值发生改变时
    headChange() {
      if (this.type == "tf") {
        this.tableData = this.meVentilation
      } else if (this.type == "xz") {
        this.tableData = this.fumigation
      } else if (this.type == "yjcg") {
        this.tableData = this.drugPurchase
      } else if (this.type == "yjly") {
        this.tableData = this.drugCollect
      } else if (this.type == "sbcg") {
        this.tableData = this.devicePurchase
      } else if (this.type == "sblygh") {
        this.tableData = this.deviceCollectReturn
      } else if (this.type == "sbwx") {
        this.tableData = this.deviceRepair
      } else if (this.type == "sbbf") {
        // 设备报废
        this.tableData = this.deviceScrap
      } else if (this.type == "sbwxgz") {
        // 设备维修改造
        this.tableData = this.deviceRepairReform
      }
    },
    btnSave() {
      this.submit()
    },

    //审批人管理提交
    submit() {
      var data = {
        data: this.tableData,
        type: "tf",
        depot_id: this.depotId,
      }
      console.log(data.data, "......")
      approverSubmit(data)
        .then((res) => {
          if (res.code == 200) {
            console.log(res.data, "res.data")
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },

    //查看审批人列表
    approverList() {
      var type = this.type
      var userId = this.userInfo.uid
      var depotId = this.depotId
      checkList(type, userId, depotId)
        .then((res) => {
          if (res.code == 200) {
            console.log(res.data, "查看数据")

            if (
              res.data == null ||
              res.data == "" ||
              res.data == undefined ||
              res.data == []
            ) {
              this.tableData = this.meVentilation
            } else {
              this.tableData = res.data
            }

            console.log(this.tableData, " this.meVentilation....")
            this.getRoleSelect()
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
  created() {
  },

  mounted() {
    //获取当前缓存的登录用户信息
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
    console.log(this.userInfo, "this.userInfo.....")

    this.approverList()
  },
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
}

.table {
  width: 100%;
  text-align: center;

  margin: 20px 0 50px;
}
.btns {
  text-align: right;
}
</style>
