<template>
  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body>
    <el-form ref="dataForm" :label-position="labelPosition" :rules="rules" :model="kkjForm" label-width="120px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="开孔机编号" prop="kkjCode">
            <el-input :disabled="codeDisabled" v-model.trim="kkjForm.kkjCode" type="text" placeholder="必填"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开孔机名称" prop="kkjName">
            <el-input :disabled="nameDisabled" v-model.trim="kkjForm.kkjName" type="text" placeholder="必填"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="开孔机规格" prop="kkjModel">
            <el-input :disabled="modelDisabled" v-model.trim="kkjForm.kkjModel" type="text" placeholder="必填"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="权属单位" prop="companyId">
            <dept-single :disabled="companyDisabled" v-model="kkjForm.companyId" :dept-show="true" tips="company" dept-type="03" placeholder="选择权属单位" @change="companyChange"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="使用单位" prop="deptid">
            <el-select v-model="kkjForm.deptid" :disabled="!kkjForm.companyId || deptDisabled" placeholder="选择使用单位">
              <el-option
                v-for="item in deptList"
                :key="item.id"
                :label="item.name"
                :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button v-show="dialogStatus !== 'detail'" type="primary" size="medium" @click="saveData"> 保存 </el-button>
      <el-button v-show="dialogStatus !== 'detail' " size="medium" @click="cancel"> 取消 </el-button>
      <el-button v-show="dialogStatus === 'detail'" type="primary" size="medium" @click="cancel"> 确定 </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { toTreeList } from '@/utils/structure'
import SelectTree from '@/components/SelectTree/singleSelect'
import { getDeptTreeList } from '@/api/system/dept'
import DeptSingle from '@/components/DeptSelect/DeptSingle'
import { addKkj, updateKkj } from '@/api/well/well'
import DeptSelect from '@/components/DeptSelect'

export default {
  name: 'EditKkj',
  components: { DeptSingle, SelectTree, DeptSelect },
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      dialogStatus: '', // 对话框类型：create,update
      kkjForm: {
        kkjCode: '', // 开孔机编号
        kkjName: '', // 开孔机名称
        kkjModel: '', // 开孔机规格
        companyId: '', // 公司
        deptid: '' // 使用单位
      }, // 表单
      // deptProps: {
      //   parent: 'pid',
      //   value: 'id',
      //   label: 'name',
      //   children: 'children'
      // },
      deptTreeList: null, // 组织树列表数据
      secondDeptTreeList: null, // 二级组织树列表
      textMap: {
        update: '编辑',
        create: '新增',
        detail: '详情'
      }, // 表头显示标题
      rules: {
        kkjCode: [{ required: true, message: '开孔机编号不能为空', trigger: ['blur', 'change'] }],
        kkjName: [{ required: true, message: '开孔机名称不能为空', trigger: ['blur', 'change'] }],
        kkjModel: [{ required: true, message: '开孔机规格不能为空', trigger: ['blur', 'change'] }],
        companyId: [{ required: true, message: '权属单位必选', trigger: 'change' }],
        deptid: [{ required: true, message: '使用单位必选', trigger: 'change' }]
      },
      deptList: null,
      dialogVisible: false,
      labelPosition: 'right',
      responseAssignShow: false,
      deptShowTop: false, // 权属单位下拉是否显示顶级
      deptShow: true,
      codeDisabled: false,
      nameDisabled: false,
      modelDisabled: false,
      companyDisabled: false,
      deptDisabled: false
    }
  },
  computed: {
    // showResponseDept() {
    //   if (this.kkjForm.deptid === '') {
    //     return true
    //   } else {
    //     if (this.secondDeptTreeList && this.secondDeptTreeList.length >= 1) {
    //       return false
    //     } else {
    //       return true
    //     }
    //   }
    // },
    firstDept() { // 获取权属单位
      return this.kkjForm.companyId
    }
  },
  watch: {
    firstDept(val, oldVal) { // 监控权属单位变化
      if (oldVal !== '') {
        if (val !== '') {
          this.companyChange()
        }
      } else {
        if (val !== '') {
          this.companyChange()
        }
      }
    }
  },
  mounted: function() { },
  methods: {
    // 初始化对话框
    initDialog: function(dialogStatus, dialogFormVisible, row) {
      this.resetForm()
      this.dialogFormVisible = dialogFormVisible
      this.dialogStatus = dialogStatus
      this.codeDisabled = false
      this.nameDisabled = false
      this.modelDisabled = false
      this.companyDisabled = false
      this.deptDisabled = false
      if (dialogStatus === 'update') {
        this.codeDisabled = true
        this.nameDisabled = true
        this.modelDisabled = true
      } else if (dialogStatus === 'detail') {
        this.codeDisabled = true
        this.nameDisabled = true
        this.modelDisabled = true
        this.companyDisabled = true
        this.deptDisabled = true
      }
      if (row !== null) {
        this.kkjForm = {
          id: row.id, // 井id
          kkjCode: row.kkjCode, // 井编号
          kkjName: row.kkjName, // 井名称
          kkjModel: row.kkjModel, // 井类型
          companyId: row.companyId, // 权属单位
          deptid: row.deptid // 权属单位
        }
        this.companyChange()
        this.kkjForm.deptid = row.deptid
      }
      // this.fetchSecondDeptTree()
    },
    companyChange() {
      debugger
      let listQuery = {}
      listQuery = {
        deptType: '',
        tips: 'dept',
        pid: this.kkjForm.companyId
      }
      getDeptTreeList(listQuery).then(response => {
        const list = response.data
        if (list) {
          this.deptList = list
        }
      })
    },
    // 加载组织机构树形下拉菜单
    fetchSecondDeptTree: function() {
      const listQuery = {
        pid: this.kkjForm.deptid,
        deptType: '03'
      }
      getDeptTreeList(listQuery).then(response => {
        console.log(response.data)
        if (response.data) {
          this.secondDeptTreeList = toTreeList(response.data, this.kkjForm.deptid)
        }
      })
    },
    // 取消
    cancel() {
      this.dialogFormVisible = false
      this.fileList = []
      // 清除验证
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 重置表单
    resetForm() {
      this.kkjForm = {
        kkjCode: '', // 井编号
        kkjName: '', // 井名称
        kkjModel: '', // 开孔机规格
        companyId: '', // 权属单位
        deptid: '' // 使用单位
      }
      // 清除验证
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 保存数据
    saveData: function() {
      if (this.dialogStatus === 'create') {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            addKkj(this.kkjForm).then(response => {
              console.log('新增开孔机')
              if (response.code === 200) {
                this.$message.success('新增成功!')
                this.$emit('watchChild')
                this.resetForm()
              }
            })
          }
        })
      } else if (this.dialogStatus === 'update') {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            updateKkj(this.kkjForm).then(response => {
              if (response.code === 200) {
                this.$message.success('修改成功!')
                this.$emit('watchChild')
                this.dialogFormVisible = false
              }
              // 清除验证
              this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
              })
            })
          }
        })
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" >
  .hide .el-upload--picture-card {
    display: none;
  }
  .main-form{
    margin: 20px 30px;
    padding: 10px;
  }
  .el-dialog{
    width:700px
  }
  .el-select{
    width: 100%;
  }
  .line{
    width: 50px;
    margin-left: 5px;
  }
  .hide .el-upload-–picture-card{
    display: none;
  }
  .imgBox{
    width: 100%;
    text-align: center;
  }
</style>