<template>
  <div>
    <!-- 新建/修改 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="1100px"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      @close="closeDialog"
      :before-close="beforeClose"
    >
      <div style="overflow-y: auto; max-height: 70vh; padding: 20px">
        <el-row>
          <el-col :span="3">
            <h3 style="font-weight: 700">一、基本资料：</h3>
          </el-col>
          <el-col :span="21">
            <el-form
              :model="baseForm"
              :rules="rules"
              :inline="true"
              ref="ruleForm"
              class="demo-ruleForm"
              style="margin-top: 10px"
            >
              <el-form-item label="所在单位" prop="unitId">
                <el-select
                  v-model="baseForm.unitId"
                  placeholder="请选择所在单位："
                  style="width: 200px"
                >
                  <el-option
                    :label="item.label"
                    :value="item.label"
                    v-for="(item, index) in postOptions"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="所在部门" prop="positionArr">
                <el-cascader
                  style="width: 200px"
                  v-model="baseForm.positionArr"
                  :options="postOptions"
                  @change="handleChange"
                >
                </el-cascader>
              </el-form-item>
              <el-form-item
            label="所在岗位"
            prop="postId"
            :rules="[
              { required: true, message: '请选择所在岗位', trigger: 'change' }
            ]"
          >
            <el-select
              v-model="baseForm.postId"
              placeholder="请选择岗位："
              style="width: 200px"
            >
              <el-option
                :label="item.postName"
                :value="item.postId"
                v-for="(item, index) in departmentOption"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
              <el-form-item label="岗位级别" prop="positionLevel">
                <el-select
                  v-model="baseForm.positionLevel"
                  placeholder="请选择岗位级别："
                  style="width: 200px"
                >
                  <el-option label="M7" value="M7"></el-option>
                  <el-option label="M8" value="M8"></el-option>
                  <el-option label="M9" value="M9"></el-option>
                  <el-option label="M10" value="M10"></el-option>
                  <el-option label="T5" value="T5"></el-option>
                  <el-option label="T6" value="T6"></el-option>
                  <el-option label="T7" value="T7"></el-option>
                  <el-option label="T8" value="T8"></el-option>
                  <el-option label="B1" value="B1"></el-option>
                  <el-option label="B2" value="B2"></el-option>
                  <el-option label="B3" value="B3"></el-option>
                  <el-option label="B4" value="B4"></el-option>
                  <el-option label="B5" value="B5"></el-option>
                  <el-option label="B6" value="B6"></el-option>
                  <el-option label="B7" value="B7"></el-option>
                  <el-option label="B8" value="B8"></el-option>
                  <el-option label="B9" value="B9"></el-option>
                  <el-option label="B10" value="B10"></el-option>
                  <el-option label="W5" value="W5"></el-option>
                  <el-option label="W6" value="W6"></el-option>
                  <el-option label="W7" value="W7"></el-option>
                  <el-option label="W8" value="W8"></el-option>
                  <el-option label="W9" value="W9"></el-option>
                  <el-option label="W10" value="W10"></el-option>
                  <el-option label="W11" value="W11"></el-option>
                  <el-option label="W12" value="W12"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否涉密" prop="isConfidential">
                <el-radio-group
                  v-model="baseForm.isConfidential"
                  style="width: 200px"
                >
                  <el-radio label="是">是</el-radio>
                  <el-radio label="否">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="岗位编号" style="margin-left: 10px">
                <el-input
                  v-model="baseForm.positionCode"
                  style="width: 200px"
                  placeholder="请输入岗位编号"
                ></el-input>
              </el-form-item>
              <br />
              <el-form-item label="管辖人数" style="margin-left: 10px">
                <el-input
                  v-model="baseForm.subordinateCount"
                  style="width: 200px"
                  type="number"
                  placeholder="请输入管辖人数"
                ></el-input>
              </el-form-item>
              <el-form-item label="直接上级" style="margin-left: 10px">
                <el-input
                  v-model="baseForm.directSuperior"
                  style="width: 200px"
                  placeholder="请输入直接上级"
                ></el-input>
              </el-form-item>
              <el-form-item label="直接下级" style="margin-left: 10px">
                <el-input
                  v-model="baseForm.directSubordinate"
                  style="width: 200px"
                  placeholder="请输入直接下级"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="3">
            <h3 style="font-weight: 700">二、工作职责：</h3>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <div style="display: flex; margin-left: 35px">
              <h3 style="font-weight: 700; margin-right: 10px">1.工作摘要</h3>
              <el-input
                type="textarea"
                style="width: 850px"
                :autosize="{ minRows: 4, maxRows: 4 }"
                placeholder="请输入工作摘要"
                v-model="baseForm.jobSummary"
              >
              </el-input>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <h3 style="font-weight: 700; margin-right: 10px; margin-left: 35px">
              2.主要职责
            </h3>
          </el-col>
        </el-row>

        <!-- 业务职责 -->
        <el-row>
          <el-col>
            <h3 style="font-weight: 700; margin-right: 10px; margin-left: 35px">
              （1）业务职责
            </h3>
          </el-col>
        </el-row>
        <div
          v-for="(item, index) in baseForm.oneList"
          :key="item.id"
          style="margin-bottom: 15px"
        >
          <el-row class="col_box">
            <el-col :span="8">
              <b>一级事项</b>
              <el-input
                v-model="item.levelOne"
                placeholder="请输入"
                style="width: 200px"
              ></el-input>
            </el-col>
            <el-col :span="8">
              <b>二级事项</b>
              <el-input
                v-model="item.levelTwo"
                placeholder="请输入"
                style="width: 200px"
              ></el-input>
            </el-col>
            <el-col :span="7">
              <b>三级事项</b>
              <el-input
                v-model="item.levelThree"
                placeholder="请输入"
                style="width: 200px"
              ></el-input>
            </el-col>
          </el-row>
          <el-row class="col_box">
            <el-col :span="8">
              <b>四级事项</b>
              <el-input
                v-model="item.levelFour"
                placeholder="请输入"
                style="width: 200px"
              ></el-input>
            </el-col>
            <el-col :span="8">
              <b>五级事项</b>
              <el-input
                v-model="item.levelFive"
                placeholder="请输入"
                style="width: 200px"
              ></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" style="display: flex; padding-left: 72px">
              <b style="margin-right: 10px">工作标准</b>
              <el-input
                type="textarea"
                style="width: 830px"
                :autosize="{ minRows: 4, maxRows: 4 }"
                placeholder="请输入工作标准"
                v-model="item.workStandard"
              >
              </el-input>
            </el-col>
          </el-row>
          <div
            class="add_box"
            @click="addOneList"
            v-if="Array.isArray(baseForm.oneList)?baseForm.oneList.length === index + 1:true"
          >
            添加一级事项
          </div>
        </div>

        <!-- (2)党建及党风廉政建设职责 -->
        <el-row>
          <el-col>
            <h3 style="font-weight: 700; margin-right: 10px; margin-left: 35px">
              （2）党建及党风廉政建设职责
            </h3>
          </el-col>
        </el-row>
        <div
          v-for="(item, index) in baseForm.twoList"
          :key="item.id"
          style="margin-bottom: 15px"
        >
          <el-row class="col_box">
            <el-col :span="8">
              <b>一级事项</b>
              <el-input
                v-model="item.levelOne"
                placeholder="请输入"
                style="width: 200px"
              ></el-input>
            </el-col>
            <el-col :span="8">
              <b>二级事项</b>
              <el-input
                v-model="item.levelTwo"
                placeholder="请输入"
                style="width: 200px"
              ></el-input>
            </el-col>
            <el-col :span="7">
              <b>三级事项</b>
              <el-input
                v-model="item.levelThree"
                placeholder="请输入"
                style="width: 200px"
              ></el-input>
            </el-col>
          </el-row>
          <el-row class="col_box">
            <el-col :span="8">
              <b>四级事项</b>
              <el-input
                v-model="item.levelFour"
                placeholder="请输入"
                style="width: 200px"
              ></el-input>
            </el-col>
            <el-col :span="8">
              <b>五级事项</b>
              <el-input
                v-model="item.levelFive"
                placeholder="请输入"
                style="width: 200px"
              ></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" style="display: flex; padding-left: 72px">
              <b style="margin-right: 10px">工作标准</b>
              <el-input
                type="textarea"
                style="width: 830px"
                :autosize="{ minRows: 4, maxRows: 4 }"
                placeholder="请输入工作标准"
                v-model="item.workStandard"
              >
              </el-input>
            </el-col>
          </el-row>
          <div
            class="add_box"
            @click="addTwoList"
            v-if="Array.isArray(baseForm.twoList)? baseForm.twoList.length === index + 1 :true"
          >
            添加一级事项
          </div>
        </div>

        <!-- （3）安全环保责任 -->
        <el-row>
          <el-col>
            <h3 style="font-weight: 700; margin-right: 10px; margin-left: 35px">
              （3）安全环保责任
            </h3>
          </el-col>
        </el-row>
        <div
          v-for="(item, index) in baseForm.threeList"
          :key="item.id"
          style="margin-bottom: 15px"
        >
          <el-row class="col_box">
            <el-col :span="8">
              <b>一级事项</b>
              <el-input
                v-model="item.levelOne"
                placeholder="请输入"
                style="width: 200px"
              ></el-input>
            </el-col>
            <el-col :span="8">
              <b>二级事项</b>
              <el-input
                v-model="item.levelTwo"
                placeholder="请输入"
                style="width: 200px"
              ></el-input>
            </el-col>
            <el-col :span="7">
              <b>三级事项</b>
              <el-input
                v-model="item.levelThree"
                placeholder="请输入"
                style="width: 200px"
              ></el-input>
            </el-col>
          </el-row>
          <el-row class="col_box">
            <el-col :span="8">
              <b>四级事项</b>
              <el-input
                v-model="item.levelFour"
                placeholder="请输入"
                style="width: 200px"
              ></el-input>
            </el-col>
            <el-col :span="8">
              <b>五级事项</b>
              <el-input
                v-model="item.levelFive"
                placeholder="请输入"
                style="width: 200px"
              ></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" style="display: flex; padding-left: 72px">
              <b style="margin-right: 10px">工作标准</b>
              <el-input
                type="textarea"
                style="width: 830px"
                :autosize="{ minRows: 4, maxRows: 4 }"
                placeholder="请输入工作标准"
                v-model="item.workStandard"
              >
              </el-input>
            </el-col>
          </el-row>
          <div
            class="add_box"
            @click="addThreeList"
            v-if="Array.isArray(baseForm.threeList)?  baseForm.threeList.length === index + 1 :true"
          >
            添加一级事项
          </div>
        </div>

        <!-- (4)合规与保密职责 -->
        <el-row>
          <el-col>
            <h3 style="font-weight: 700; margin-right: 10px; margin-left: 35px">
              （4）合规与保密职责
            </h3>
          </el-col>
        </el-row>
        <div
          v-for="(item, index) in baseForm.fourList"
          :key="item.id"
          style="margin-bottom: 15px"
        >
          <el-row class="col_box">
            <el-col :span="8">
              <b>一级事项</b>
              <el-input
                v-model="item.levelOne"
                placeholder="请输入"
                style="width: 200px"
              ></el-input>
            </el-col>
            <el-col :span="8">
              <b>二级事项</b>
              <el-input
                v-model="item.levelTwo"
                placeholder="请输入"
                style="width: 200px"
              ></el-input>
            </el-col>
            <el-col :span="7">
              <b>三级事项</b>
              <el-input
                v-model="item.levelThree"
                placeholder="请输入"
                style="width: 200px"
              ></el-input>
            </el-col>
          </el-row>
          <el-row class="col_box">
            <el-col :span="8">
              <b>四级事项</b>
              <el-input
                v-model="item.levelFour"
                placeholder="请输入"
                style="width: 200px"
              ></el-input>
            </el-col>
            <el-col :span="8">
              <b>五级事项</b>
              <el-input
                v-model="item.levelFive"
                placeholder="请输入"
                style="width: 200px"
              ></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" style="display: flex; padding-left: 72px">
              <b style="margin-right: 10px">工作标准</b>
              <el-input
                type="textarea"
                style="width: 830px"
                :autosize="{ minRows: 4, maxRows: 4 }"
                placeholder="请输入工作标准"
                v-model="item.workStandard"
              >
              </el-input>
            </el-col>
          </el-row>
          <div
            class="add_box"
            @click="addFourList"
            v-if=" Array.isArray(baseForm.fourList)?   baseForm.fourList.length === index + 1 :true"
          >
            添加一级事项
          </div>
        </div>

        <el-row>
          <el-col>
            <h3 style="font-weight: 700">三、认知资格与能力素质要求：</h3>
          </el-col>
        </el-row>

        <!-- 最后表格 -->
        <el-row class="bottom_table">
          <el-col
            :span="6"
            class="left_box"
            style="font-weight: 700; font-size: 18px"
          >
            项目
          </el-col>
          <el-col
            :span="17"
            class="right_box"
            style="font-weight: 700; font-size: 18px"
          >
            要求
          </el-col>
        </el-row>
        <el-row
          class="bottom_table"
          v-for="item in baseForm.fiveList"
          :key="item.id"
        >
          <el-col :span="6" class="left_box">
            {{ item.sequenceProject }}
          </el-col>
          <el-col :span="17" class="right_box">
            <el-input
              v-model="item.requirement"
              placeholder="请输入"
            ></el-input>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { deptTree, optionselect ,postCheckListAdd ,postCheckListLook , postCheckListUpdate} from '@/api/allApi/index.js'
import {
  getOptionselect
} from "@/api/postInspectionPlanning/teamManagement.js";

import { v4 } from 'uuid'
export default {
  name: 'PostCheckWebAddDialog',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    title:{
      type:String
    },
    ids:{
      type:Number
    },
  },

  data() {
    return {
      postOptions: [],
      departmentOption: [],
      baseForm: {
        unitId: '',
        deptId: '',
        postId: '',
        positionLevel: '',
        positionArr: [],
        children:[],
        isConfidential: "否",
        subordinateCount: null,
        positionCode: '',
        directSuperior: '',
        directSubordinate: '',
        remark:'',
        oneList: [
          {
            type: 1,
            id: v4(),
            levelOne: '',
            levelTwo: '',
            levelThree: '',
            levelFour: '',
            levelFive: '',
            workStandard: ''
          }
        ],
        twoList: [
          {
            type: 2,
            id: v4(),
            levelOne: '',
            levelTwo: '',
            levelThree: '',
            levelFour: '',
            levelFive: '',
            workStandard: ''
          }
        ],
        threeList: [
          {
            type: 3,
            id: v4(),
            levelOne: '',
            levelTwo: '',
            levelThree: '',
            levelFour: '',
            levelFive: '',
            workStandard: ''
          }
        ],
        fourList: [
          {
            type: 4,
            id: v4(),
            levelOne: '',
            levelTwo: '',
            levelThree: '',
            levelFour: '',
            levelFive: '',
            workStandard: ''
          }
        ],
        fiveList: [
          {
            type: 5,
            id: v4(),
            sequenceProject: '政治要求',
            requirement: ''
          },
          {
            type: 5,
            id: v4(),
            sequenceProject: '最低学历要求',
            requirement: ''
          },
          {
            type: 5,
            id: v4(),
            sequenceProject: '最低学位要求',
            requirement: ''
          },
          {
            type: 5,
            id: v4(),
            sequenceProject: '工作经验',
            requirement: ''
          },
          {
            type: 5,
            id: v4(),
            sequenceProject: '职称要求',
            requirement: ''
          },
          {
            type: 5,
            id: v4(),
            sequenceProject: '专业要求',
            requirement: ''
          },
          {
            type: 5,
            id: v4(),
            sequenceProject: '能力要求',
            requirement: ''
          },
          {
            type: 5,
            id: v4(),
            sequenceProject: '知识要求',
            requirement: ''
          },
          {
            type: 5,
            id: v4(),
            sequenceProject: '在岗时应持有证书必须参加的培训',
            requirement: ''
          },
          {
            type: 5,
            id: v4(),
            sequenceProject: '其他要求',
            requirement: ''
          }
        ]
      },
      rules: {
        unitId: [
          { required: true, message: '请选择所在单位', trigger: 'change' }
        ],
        positionArr: [
          { required: true, message: '请选择所在部门', trigger: 'change' }
        ],
        positionLevel: [
          { required: true, message: '请选择岗位级别', trigger: 'change' }
        ],
        isConfidential: [
          { required: true, message: '请选择是否涉密', trigger: 'change' }
        ]
      }
    }
  },

  mounted() {
    this.initDeptTree()


    setTimeout(() => {
      if(this.ids){
        this.baseForm.id = this.ids
        this.initList()
      }
    }, 100);
  },

  methods: {
    async initList (){
      const  res = await postCheckListLook(this.ids)
      if (res.code !== 200) return this.$message.error(res.msg);
      this.baseForm = {...res.data , oneList:[], twoList:[], threeList:[], fourList:[], fiveList:[]}
      console.log(res.data,888);

      this.baseForm.positionArr = res.data.remark? res.data.remark.split(",").map(item=>+item):[]
      if(this.baseForm.positionArr.length){
        this.getOptionselect(res.data.deptId)
      }
      this.baseForm.children.forEach(item => {
        if(item.type === 1){
          this.baseForm.oneList.push(item)
        }
        if(item.type === 2){
          this.baseForm.twoList.push(item)
        }
        if(item.type === 3){
          this.baseForm.threeList.push(item)
        }
        if(item.type === 4){
          this.baseForm.fourList.push(item)
        }
        if(item.type === 5){
          this.baseForm.fiveList.push(item)
        }
      });
      if(!this.baseForm.oneList.length){
        this.baseForm.oneList = {
            type: 1,
            id: v4(),
            levelOne: '',
            levelTwo: '',
            levelThree: '',
            levelFour: '',
            levelFive: '',
            workStandard: ''
          }
      }
      if(!this.baseForm.twoList.length){
        this.baseForm.twoList = {
            type: 1,
            id: v4(),
            levelOne: '',
            levelTwo: '',
            levelThree: '',
            levelFour: '',
            levelFive: '',
            workStandard: ''
          }
      }
      if(!this.baseForm.threeList.length){
        this.baseForm.threeList = {
            type: 1,
            id: v4(),
            levelOne: '',
            levelTwo: '',
            levelThree: '',
            levelFour: '',
            levelFive: '',
            workStandard: ''
          }
      }
      if(!this.baseForm.fourList.length){
        this.baseForm.fourList = {
            type: 1,
            id: v4(),
            levelOne: '',
            levelTwo: '',
            levelThree: '',
            levelFour: '',
            levelFive: '',
            workStandard: ''
          }
      }
    },
    closeDialog() {
      this.$emit('closeDialog')
    },
    beforeClose() {
      this.$confirm('确认退出吗？退出将不会保留本次输入内容', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.closeDialog()
        })
        .catch((err) => {
          err
        })
    },
    addOneList() {
      this.baseForm.oneList.push({
        type: 1,
        id: v4(),
        levelOne: '',
        levelTwo: '',
        levelThree: '',
        levelFour: '',
        levelFive: '',
        workStandard: ''
      })
    },
    addTwoList() {
      this.baseForm.twoList.push({
        type: 2,
        id: v4(),
        levelOne: '',
        levelTwo: '',
        levelThree: '',
        levelFour: '',
        levelFive: '',
        workStandard: ''
      })
    },
    addThreeList() {
      this.baseForm.threeList.push({
        type: 3,
        id: v4(),
        levelOne: '',
        levelTwo: '',
        levelThree: '',
        levelFour: '',
        levelFive: '',
        workStandard: ''
      })
    },
    addFourList() {
      this.baseForm.fourList.push({
        type: 4,
        id: v4(),
        levelOne: '',
        levelTwo: '',
        levelThree: '',
        levelFour: '',
        levelFive: '',
        workStandard: ''
      })
    },
    async initDeptTree() {
      const res = await deptTree()
      if (res.code !== 200) return this.$message.error(res.msg)
      this.postOptions = res.data
    },
    cancel() {
      this.closeDialog()
    },
    handleChange(value) {
      if(value){
        this.baseForm.remark = value.join()
        this.baseForm.deptId = value[value.length - 1]
        this.baseForm.postId = ""
        this.getOptionselect(this.baseForm.deptId);
      }
    },
    getOptionselect(id) {
      getOptionselect(id).then((data) => {
        this.departmentOption = data.data;
      });
    },
    submit() {
          this.$refs.ruleForm.validate( async(valid) => {
            if (valid) {
              this.baseForm.children = [
                ...this.baseForm.oneList,
                ...this.baseForm.twoList,
                ...this.baseForm.threeList,
                ...this.baseForm.fourList,
                ...this.baseForm.fiveList,
              ]

              this.baseForm.children.map(item=>item.id ='')
              if(this.title ==="新建"){
                const res  = await postCheckListAdd(this.baseForm)
                if (res.code !== 200) return this.$message.error(res.msg);
              }else{
                const res  = await postCheckListUpdate(this.baseForm)
                if (res.code !== 200) return this.$message.error(res.msg);
              }
              this.$message.success(`${this.title}成功!`)
              this.cancel()
            } else {
              this.$message.warning("必传项不能为空!")
              return false
            }
          })
    }
  }
}
</script>

<style lang="scss" scoped>
.col_box {
  margin-bottom: 15px;
  b {
    margin-right: 10px;
  }

  ::v-deep .el-col {
    text-align: right;
  }
}

.add_box {
  width: 830px;
  margin-left: 140px;
  margin-top: 15px;
  text-align: center;
  border: 1px solid #808080;
  border-radius: 3px;
  cursor: pointer;
}

.bottom_table {
  margin-left: 100px;

  ::v-deep .el-col {
    outline: 1px solid #000;
    padding: 5px;
    min-height: 50px;
    display: flex;
    align-items: center;
  }
}
</style>
