<template>
  <!-- 工程管理 新增、编辑 表单组件 -->
  <div>
    <el-form
      label-width="100px"
      size="medium"
      ref="projectParamsRef"
      :model="projectParams"
      :rules="projectParamsRules"
    >
      <el-row type="flex" justify="space-between" :gutter="24">
        <el-col :span="12">
          <el-form-item label="项目部" prop="departId">
            <el-select
              v-model="projectParams.departId"
              clearable
              filterable
              placeholder="请选择"
              @change="departChange"
              disabled
            >
              <el-option
                v-for="item in departRange"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工程名称" prop="proId">
            <el-select
              v-model="projectParams.proId"
              clearable
              filterable
              placeholder="请选择"
              @change="projChange"
              disabled
            >
              <el-option
                v-for="item in projRange"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between" :gutter="24">
        <el-col :span="12">
          <el-form-item label="申请人" prop="relUser">
            <el-input
              v-model="projectParams.relUser"
              placeholder="请输入"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系方式" prop="relPhone">
            <el-input
              v-model="projectParams.relPhone"
              :maxlength="11"
              placeholder="请输入"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>

      <TableModelTwo
        :columnsList="columnsListInsertTwo"
        ref="tableRef"
        @transIdList="getIdList"
        :show-btn-crews="false"
        :show-right-tools="false"
        :show-sel="false"
        :show-index="false"
        style="margin-bottom: 100px"
      >
      </TableModelTwo>

      <el-form-item label="审核意见" prop="remarks">
        <!--          <textarea id="remarks" v-model="projectParams.remarks" class="el-textarea" placeholder="请输入审核意见" disabled></textarea>-->
        <el-input
          :rows="4"
          type="textarea"
          v-model="projectParams.remarks"
          placeholder="请输入审核意见"
          disabled
        />
      </el-form-item>
      <el-row type="flex" justify="space-between" :gutter="24">
        <el-col :span="12">
          <el-form-item label="审批人" prop="auditUserName">
            <el-input
              v-model="projectParams.auditUserName"
              placeholder="请输入审批人"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="审批时间" prop="auditTime">
            <el-input
              v-model="projectParams.auditTime"
              placeholder="请输入审批时间"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div style="display: flex; justify-content: right">
      <el-button type="danger" @click="onReturn">驳回</el-button>
      <el-button type="success" @click="onSubmit">同意</el-button>
      <!-- <el-button
            @click="
                () => {
                    this.$emit('closeDialog')
                }
            "
          >驳回</el-button -->
    </div>
  </div>
</template>

<script>
import { columnsListInsertTwo } from "../config-insert";
// import {  formLabelApprove,columnsListApprove} from '../config-approve'
import {
  // addEdgeDeviceApi,
  // editEdgeDeviceApi,
  approveEdgeDeviceApi,
  queryEdgeDeviceByIdApi,
} from "@/api/base/insert";
import { queryProjApi } from "@/api/base/crew";
import { queryProjDeptListApi } from "@/api/base/projDept";
export default {
  name: "FormProject",
  props: {
    editParams: {
      type: Object,
      default: () => null,
    },
  },
  components: {},
  created() {
    this.getRanges();
  },
  mounted() {
    console.log(this.editParams);
    if (this.editParams) {
      Object.assign(this.projectParams, this.editParams);
      // this.projectParams.auditUserName = this.editParams.auditUserName
      // this.projectParams.remarks = ''
      // 查询所属设备
      queryEdgeDeviceByIdApi(this.editParams.id)
        .then((res) => {
          console.log(res, "列表数据---");
          res.rows.forEach((item) => {
            this.$refs.tableRef.tableList.unshift(item);
            this.projectParams.auditUserName = item.auditUserName;
          });

          this.$refs.tableRef.total = res.rows.length;
        })
        .catch((err) => {});
      this.subSort = 2;
    } else {
      this.subSort = 1;
    }
  },
  data() {
    return {
      columnsListInsertTwo,
      exportList: [],
      subSort: "", // 提交类型：新增 1 / 修改 2
      projectParams: {
        departId: undefined, //项目部
        proId: undefined, //工程名称
        relUser: undefined, // 申请人
        relPhone: undefined, // 联系方式
        remarks: undefined, // 审核意见
        auditStatus: undefined, // 审核状态
        auditUserName: undefined, // 审批人
        auditTime: undefined, // 审批时间
      },
      // 校验规则
      projectParamsRules: {
        departId: [
          {
            required: true,
            message: "请输入项目部名称",
            trigger: "blur",
          },
        ],
        proId: [
          {
            required: true,
            message: "请输入工程名称",
            trigger: "blur",
          },
        ],
        relUser: [
          {
            required: true,
            message: "请输入申请人",
            trigger: "blur",
          },
        ],
        relPhone: [
          {
            required: true,
            message: "手机号格式不正确",
            validator: this.validatePhone,
            trigger: "blur",
          },
        ],
        remarks: [
          {
            required: true,
            message: "请输入审核意见",
            trigger: "blur",
          },
        ],
      },
      // 各类下拉
      departRange: [],
      projRange: [],
      // 手机正则
      phoneReg: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
      testId: 1,
    };
  },
  methods: {
    /** 校验手机号 */
    validatePhone(rule, value, callback) {
      if (!this.phoneReg.test(value)) {
        callback(new Error("手机号格式不正确"));
      } else {
        callback();
      }
    },
    getIdList(idList) {
      this.exportList = [];
      console.log(idList);
    },
    handleAddEdge() {
      let setObj = {};
      this.$set(setObj, "testId", this.testId);
      this.testId++;
      this.$set(setObj, "devName", undefined);
      this.$set(setObj, "devCode", undefined);
      this.$set(setObj, "unitName", undefined);
      this.$set(setObj, "areaName", undefined);
      this.$set(setObj, "devUser", undefined);
      this.$set(setObj, "devUserPhone", undefined);
      this.$refs.tableRef.tableList.push(setObj);
    },
    handleDeleteEdge(v) {
      this.$modal
        .confirm("是否确认删除该数据项？")
        .then(() => {
          this.$refs.tableRef.tableList.forEach((item, index) => {
            if (item.testId === v.testId) {
              this.$refs.tableRef.tableList.splice(index, 1);
            }
          });
        })
        .catch(() => {});
    },

    /** 获取各类下拉框 */
    async getRanges() {
      // 获取项目部下拉选
      let deptRes = await queryProjDeptListApi({
        isAll: 0,
      });
      this.departRange = deptRes.data.map((item) => {
        return {
          label: item.departName,
          value: item.id,
        };
      });
      // 获取工程下拉选
      let projRes = await queryProjApi({
        isAll: 0,
      });
      this.projRange = projRes.data.map((item) => {
        return {
          label: item.proName,
          value: item.id,
        };
      });
    },
    departChange(e) {
      this.departRange.forEach((item) => {
        if (e === item.value) {
          this.projectParams.departName = item.label;
        }
      });
    },
    projChange(e) {
      this.projRange.forEach((item) => {
        if (e === item.value) {
          this.projectParams.proName = item.label;
        }
      });
    },
    /** 改变树结构 */
    changeTree(leaf) {
      leaf.map((item) => {
        item.value = item.id;
        if (item.children) {
          this.changeTree(item.children);
        }
      });
      return leaf;
    },
    /** 确认按钮 */
    onSubmit() {
      console.log(this.$refs.tableRef.tableList, this.projectParams);
      this.$refs.projectParamsRef.validate(async (valid) => {
        if (valid) {
          this.projectParams.recordList = this.$refs.tableRef.tableList;
          this.projectParams.auditStatus = 1;
          // if(this.subSort === 1) {
          //   let res = await addEdgeDeviceApi(this.projectParams)
          //   if(res.code === 200) {
          //     this.$modal.msgSuccess('操作成功')
          //     this.$emit('closeDialog', true)
          //   }
          // } else {
          let res = await approveEdgeDeviceApi(this.projectParams);
          if (res.code === 200) {
            this.$modal.msgSuccess("操作成功");
            this.$emit("closeDialogAll", true);
          }
        }
      });
    },
    onReturn() {
      this.$refs.projectParamsRef.validate(async (valid) => {
        if (valid) {
          this.projectParams.recordList = this.$refs.tableRef.tableList;
          this.projectParams.auditStatus = 2;
          let res = await approveEdgeDeviceApi(this.projectParams);
          if (res.code === 200) {
            this.$modal.msgSuccess("操作成功");
            this.$emit("closeDialogAll", true);
          }
        }
      });
    },
  },
};
</script>

<style scoped>
::v-deep .el-select {
  width: 100%;
}
::v-deep .el-form-item__label {
  font-weight: normal;
}
.el-textarea {
  width: 100%;
  height: 100px;
  resize: none;
}
</style>
