<template>
  <el-dialog v-if="visible" :visible.sync="visible" :title="title" width="600px" @close="close">
    <el-form v-loading="loading" ref="form" :rules="rules" :model="form" label-width="110px" style="width: 500px;">
      <el-form-item label="标准类别" prop="CHECK_CATEGORY">
        <div class="uo-flex">
          <el-select v-if="form.CHECK_CATEGORY_WAY === 'select'" v-model="form.CHECK_CATEGORY" placeholder="选择标准类别..." clearable style="width: 100%" class="filter-item" @change="changeCategory">
            <el-option v-for="item in checkCategoryList" :key="item.DICTIONARY_ID" :label="item.DICTIONARY_NAME" :value="item.DICTIONARY_ID" />
          </el-select>
          <el-input v-if="form.CHECK_CATEGORY_WAY === 'value'" id="leaPostVal" :disabled="form.CHECK_CATEGORY_WAY === 'select'" v-model="form.CHECK_CATEGORY" placeholder="这里输入新的标准类别..." />
          <el-button
            type="success"
            style="margin-left: 5px;height: 32px;"
            size="mini"
            @click="changeEditWay">{{ form.CHECK_CATEGORY_WAY === 'select' ? '输入' : '选择' }}</el-button>
        </div>
      </el-form-item>
      <el-form-item label="标准项目" prop="CHECK_ITEM">
        <div class="uo-flex">
          <el-select v-if="form.CHECK_ITEM_WAY === 'select'" v-model="form.CHECK_ITEM" placeholder="选择标准项目..." clearable style="width: 100%" class="filter-item">
            <el-option v-for="item in checkItemList" :key="item.DICTIONARY_ID" :label="item.DICTIONARY_NAME" :value="item.DICTIONARY_ID" />
          </el-select>
          <el-input v-if="form.CHECK_ITEM_WAY === 'value'" id="leaPostVal" :disabled="form.CHECK_ITEM_WAY === 'select'" v-model="form.CHECK_ITEM" placeholder="这里输入新的标准项目..." />
          <el-button
            :disabled="form.CHECK_CATEGORY_WAY === 'value'"
            type="success"
            style="margin-left: 5px;height: 32px;"
            size="mini"
            @click="changeEditItemWay">{{ form.CHECK_ITEM_WAY === 'select' ? '输入' : '选择' }}</el-button>
        </div>
      </el-form-item>
      <el-form-item label="检查内容" prop="CHECK_CONTENT">
        <el-input v-model="form.CHECK_CONTENT" :autosize="{ minRows: 1}" type="textarea" maxlength="500" placeholder="输入检查内容..." />
      </el-form-item>
      <el-form-item label="检查标准" prop="CHECK_STANDARD">
        <el-input v-model="form.CHECK_STANDARD" :autosize="{ minRows: 1}" type="textarea" maxlength="500" placeholder="输入检查标准..." />
      </el-form-item>
      <el-form-item label="参考依据" prop="REFERENCE_BASIS">
        <el-input v-model="form.REFERENCE_BASIS" :autosize="{ minRows: 1}" type="textarea" maxlength="500" placeholder="输入参考依据..." />
      </el-form-item>
      <el-form-item label="检查合格项" prop="CHECK_QUALIFIED">
        <el-input v-model="form.CHECK_QUALIFIED" :autosize="{ minRows: 1}" type="textarea" maxlength="500" placeholder="输入检查合格项..." />
      </el-form-item>
      <el-form-item label="检查不合格项" prop="CHECK_UNQUALIFIED">
        <el-input v-model="form.CHECK_UNQUALIFIED" :autosize="{ minRows: 1}" type="textarea" maxlength="500" placeholder="输入检查不合格项..." />
      </el-form-item>
      <el-form-item label="操作类型" prop="OPERATION_TYPE">
        <el-select v-model="form.OPERATION_TYPE" placeholder="选择操作类型..." style="width: 100%" class="filter-item">
          <el-option v-for="item in operationTypeList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="排序" prop="COMMON_ITEM_SORT">
        <el-input-number :min="1" :precision="0" v-model="form.COMMON_ITEM_SORT" style="width: 100%;" controls-position="right" autocomplete="off" placeholder="这里输入排序..." />
      </el-form-item>
      <el-form-item label="状态" prop="COMMON_ITEM_STATUS">
        <el-select v-model="form.COMMON_ITEM_STATUS" placeholder="状态" style="width: 100px" class="filter-item">
          <el-option v-for="item in commonItemStatusList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves'
import CascaderDict from '../../../../components/CascaderDict'
export default {
  components: { CascaderDict },
  directives: { waves },
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      dialogType: 'addItem',
      checkCategoryList: [], // 标准类别
      checkItemAllList: [], // 标准项目
      checkItemList: [], // 标准项目
      operationTypeList: [
        { id: 1, name: '选择' },
        { id: 2, name: '填写' }
      ],
      commonItemStatusList: [
        { id: 1, name: '有效' },
        { id: 2, name: '停用' }
      ],
      tempData: {
        CHECK_CATEGORY: '',
        CHECK_ITEM: ''
      },
      form: {
        COMMON_ITEM_ID: '',
        COMMON_ID: this.$parent.COMMON_ID,
        CHECK_CATEGORY_WAY: 'select',
        CHECK_ITEM_WAY: 'select',
        CHECK_CATEGORY: '',
        CHECK_ITEM: '',
        CHECK_CONTENT: '',
        CHECK_STANDARD: '',
        REFERENCE_BASIS: '',
        CHECK_QUALIFIED: '',
        CHECK_UNQUALIFIED: '',
        OPERATION_TYPE: '',
        COMMON_ITEM_SORT: '',
        COMMON_ITEM_STATUS: ''
      },
      rules: {
        CHECK_CATEGORY: [{ required: true, message: '标准类别不能为空', trigger: 'blur' }],
        CHECK_ITEM: [{ required: true, message: '标准项目不能为空', trigger: 'blur' }],
        CHECK_CONTENT: [{ required: true, message: '检查内容不能为空', trigger: 'blur' }],
        CHECK_STANDARD: [{ required: true, message: '检查标准不能为空', trigger: 'blur' }],
        REFERENCE_BASIS: [{ required: true, message: '参考依据不能为空', trigger: 'blur' }],
        CHECK_QUALIFIED: [{ required: true, message: '检查合格项不能为空', trigger: 'blur' }],
        CHECK_UNQUALIFIED: [{ required: true, message: '检查不合格项不能为空', trigger: 'blur' }],
        OPERATION_TYPE: [{ required: true, message: '操作类型不能为空', trigger: 'blur' }],
        COMMON_ITEM_SORT: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
        COMMON_ITEM_STATUS: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
      },
      listQuery: {
        page: 1,
        limit: 10
      },
      corp_info_list: [],
      risk_unit_list: [],
      visible: false,
      info: {}
    }
  },
  methods: {
    init(e) {
      this.visible = true
      this.checkCategoryList = e.checkCategoryList
      this.checkItemAllList = e.checkItemAllList
      this.form.COMMON_ID = e.form.COMMON_ID
      this.form.COMMON_ITEM_SORT = e.form.COMMON_ITEM_SORT
      if (e.form.COMMON_ITEM_ID) {
        this.checkItemList = this.checkItemAllList.filter(item => item.PARENT_IDS.includes(e.form.CHECK_CATEGORY))
        this.$forceUpdate()
        this.dialogType = 'editItem'
        this.form = e.form
        this.tempData.CHECK_CATEGORY = e.form.CHECK_CATEGORY
        this.tempData.CHECK_ITEM = e.form.CHECK_ITEM
        this.$set(this.form, 'CHECK_CATEGORY_WAY', 'select')
        this.$set(this.form, 'CHECK_ITEM_WAY', 'select')
      }
      console.log(this.form)
    },
    changeEditWay() {
      this.form.CHECK_CATEGORY_WAY = this.form.CHECK_CATEGORY_WAY === 'select' ? 'value' : 'select'
      this.form.CHECK_ITEM_WAY = this.form.CHECK_CATEGORY_WAY
      if (this.form.CHECK_CATEGORY_WAY === 'select') {
        this.form.CHECK_CATEGORY = this.tempData.CHECK_CATEGORY
        this.form.CHECK_ITEM = this.tempData.CHECK_ITEM
      } else {
        this.form.CHECK_CATEGORY = ''
        this.form.CHECK_ITEM = ''
      }
    },
    changeEditItemWay() {
      this.form.CHECK_ITEM_WAY = this.form.CHECK_ITEM_WAY === 'select' ? 'value' : 'select'
      if (this.form.CHECK_ITEM_WAY === 'select') {
        this.form.CHECK_ITEM = this.tempData.CHECK_ITEM
      } else {
        this.form.CHECK_ITEM = ''
      }
    },
    changeCategory() {
      this.form.CHECK_ITEM = ''
      this.checkItemList = []
      this.checkItemAllList.forEach((item) => {
        if (item.PARENT_IDS.includes(this.form.CHECK_CATEGORY)) {
          this.checkItemList.push(item)
        }
      })
      this.$forceUpdate()
    },
    async confirm() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          if (this.form.CHECK_CATEGORY_WAY === 'value') {
            const { count } = await requestFN(
              '/hiddenDangerCheckStandardDictionary/validateExist',
              {
                DICTIONARY_NAME: this.form.CHECK_CATEGORY,
                DICTIONARY_LEVEL: 1
              }
            )
            if (count > 0) {
              this.$message.warning('新标准类别名称已存在！')
              return
            }
          }
          if (this.form.CHECK_ITEM_WAY === 'value') {
            const { count } = await requestFN(
              '/hiddenDangerCheckStandardDictionary/validateExist',
              {
                DICTIONARY_NAME: this.form.CHECK_ITEM,
                PARENT_ID: this.form.CHECK_CATEGORY,
                DICTIONARY_LEVEL: 2
              }
            )
            if (count > 0) {
              this.$message.warning('新标准项目名称已存在！')
              return
            }
          }
          this.loading = true
          requestFN(
            '/hiddenDangerCheckStandardCommon/' + this.dialogType,
            this.form
          ).then((data) => {
            this.loading = false
            this.close()
            this.$emit('beforeClose', '')
            this.$message.success('操作成功')
          }).catch((e) => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    },
    resetForm() {
      // this.$refs.refIndustryType.clearNodes()
      this.form = {
        COMMON_ITEM_ID: '',
        COMMON_ID: this.$parent.COMMON_ID,
        CHECK_CATEGORY: '',
        CHECK_ITEM: '',
        CHECK_CONTENT: '',
        CHECK_STANDARD: '',
        REFERENCE_BASIS: '',
        CHECK_QUALIFIED: '',
        CHECK_UNQUALIFIED: '',
        OPERATION_TYPE: '',
        COMMON_ITEM_SORT: '',
        COMMON_ITEM_STATUS: ''
      }
    },
    close() {
      this.resetForm()
      this.visible = false
    },
    getDicTree() {
    }
  }
}

</script>

<style lang="scss" scoped>
.uo-flex {
  display: flex;
}
</style>

