<template>
  <el-dialog v-dialogDrag ref="diaFrom" :title="title" :close-on-click-modal="false" :visible.sync="dhStatus"
    width="40%" top="10px" :before-close="cancel">
    <el-form :model="form" label-width="120px" :rules="rules" ref="ruleForm">
      <el-form-item label="序号：" prop="segmentNo">
        <el-input v-model="form.segmentNo" clearable style="width:90%" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="档号组成项：" prop="segmentChnName">
        <el-select v-model="form.segmentChnName" style="width:90%" size="mini" filterable>
          <el-option v-for="(item,key) in fiveSelectList" :key="key" :label="item.columnChnName"
            :value="item.columnChnName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="组成项值：" prop="segmentVal">
        <el-select v-model="form.segmentVal" clearable style="width:90%" size="mini" :disabled="!form.segmentChnName">
          <!-- <el-option label="代码" value="代码"></el-option>
          <el-option label="名称或输入值" value="名称或输入值"></el-option> -->
          <el-option v-for="(item,key) in zcxList" :key="key" :label="item.name" :value="item.name"></el-option>

        </el-select>
      </el-form-item>
      <!-- <el-form-item label="长度：" prop="segmentLenth">
        <el-input-number v-model="form.segmentLenth" size="mini" controls-position="right">
        </el-input-number>
      </el-form-item> -->
      <el-form-item label="取值或补零：" prop="segmentZero">
        <el-select v-model="form.segmentZero" clearable style="width:90%" size="mini">
          <el-option label="取值" value="取值"></el-option>
          <el-option label="补零" value="补零"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分隔符：">
        <el-select v-model="form.segmentSeparator" clearable style="width:90%" size="mini">
          <el-option label="无" value=""></el-option>
          <el-option label="-" value="-"></el-option>
          <el-option label="·" value="·"></el-option>
          <el-option label="|" value="|"></el-option>
          <el-option label="." value="."></el-option>
          <el-option label="(" value="("></el-option>
          <el-option label=")" value=")"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label=" ">
        <el-button :loading="btnloading" @click="submitForm('ruleForm')" size="mini" type="primary">保存</el-button>
        <el-button @click="cancel" size="mini" type="primary">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
  import {
    mapState
  } from "vuex";
  export default {
    props: {
      fondsname: {
        type: String,
        default: () => ""
      },
      title: {
        type: String,
        default: () => "",
      },
      tableRow: {
        type: Object,
        default: () => {},
      },
      dhStatus: {
        type: Boolean,
        default: () => false,
      },
      title: {
        type: String,
        default: () => '新增',
      },
      treeRow: {
        type: Object,
        default: () => {},
      },
    },
    computed: {
      ...mapState({
        fiveSelectList: (state) => state.categoryManagement.fiveSelectList,
      })
    },
    watch: {
      'form.segmentChnName': {
        handler(val, oldVal) {
          if (val) {
            this.zcxList = []
            let Arr = this.fiveSelectList.filter(item => item.columnChnName === val)
            if (Arr[0].columnClass != 4 && Arr[0].columnClass != 5 && Arr[0].columnInputType === "2") {
              this.zcxList = [{
                name: "值"
              }, {
                name: "文本"
              }]
            } else {
              this.zcxList = [{
                name: "文本"
              }]
            }
          }
        }
      }
    },
    data() {
      return {
        btnloading: false,
        zcxList: [],
        form: {
          fondscode: '',
          classId: '',
          segmentNo: "",
          segmentChnName: "",
          segmentVal: "",
          // segmentLenth: undefined,
          segmentZero: "",
          segmentSeparator: "-",
          segmentName: '',
          id: '',
          filingYearStart: "",
          filingYearEnd: ''
        },
        rules: {
          segmentNo: [{
            required: true,
            message: '请输入序号',
            trigger: 'blur'
          }],
          segmentChnName: [{
            required: true,
            message: '请选择档号组成项',
            trigger: 'change'
          }],
          segmentVal: [{
            required: true,
            message: '请选择组成项值',
            trigger: 'change'
          }],
          // segmentLenth: [{
          //   required: true,
          //   message: '请输入长度',
          //   trigger: 'blur'
          // }],
          segmentZero: [{
            required: true,
            message: '请选择',
            trigger: 'change'
          }],
        }
      }
    },
    methods: {
      cancel() {
        this.$emit('cancel')
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let data = {
              fondscode: this.form.fondscode,
              classId: this.form.classId,
              segmentNo: this.form.segmentNo,
              segmentChnName: this.form.segmentChnName,
              segmentVal: this.form.segmentVal,
              // segmentLenth: this.form.segmentLenth,
              segmentZero: this.form.segmentZero,
              segmentSeparator: this.form.segmentSeparator,
            }
            this.fiveSelectList.forEach(item => {
              if (item.columnChnName === this.form.segmentChnName) {
                data.segmentName = item.columnName
              }
            })
            this.btnloading = true;
            if (this.title === '新增') {
              data.fondscode = this.fondsname,
                data.classId = this.treeRow.id,
                data.filingYearStart = this.tableRow.yearScope.split('-')[0],
                data.filingYearEnd = this.tableRow.yearScope.split('-')[1]
              this.$store.dispatch('categoryManagement/saveArchiveNoFormat', data).then(res => {
                this.btnloading = false;
                this.$emit('handleNodeClick', this.treeRow)
                this.cancel()
              }).catch(err => {
                this.btnloading = false;
              })
            } else {
              data.filingYearStart = this.form.filingYearStart,
                data.filingYearEnd = this.form.filingYearEnd
              data.id = this.form.id
              this.$store.dispatch('categoryManagement/updateArchiveNoFormat', data).then(res => {
                this.btnloading = false;
                this.$emit('handleNodeClick', this.treeRow)
                this.cancel()
              }).catch(err => {
                this.btnloading = false;
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      cancel() {
        this.$emit('cancel')
      }
    }
  }

</script>
