<template>
  <div>
    <el-dialog v-dialogDrag width="80%" :title="title" :close-on-click-modal="false" :before-close="cancel"
      :visible.sync="diaFlage">
      <div>
        <!-- <el-scrollbar style="height: 100%"> -->
        <el-form class="form" ref="ruleForm" :model="ruleForm" label-width="120px" size="small">
          <el-form-item v-for="(ele, key) in form" :prop="ele.fieldName" :key="key"
            :style="{ width: ele.width, padding: '5px' }" :rules="[
              {
                required: ele.require === true ? true : false,
                message: `${ele.label}为必填项`,
                 trigger:  ele.ctype === 'select'? 'change':'blur',
              },
            ]">
            <template slot="label">
              <span style="font-weight: 500">{{ ele.label }}：</span>
            </template>
            <el-input size="mini" v-if="ele.ctype === 'input' && ele.label!='全宗号' && ele.label!='实体分类号' "
              v-model="ruleForm[ele.fieldName]" placeholder="请输入" clearable></el-input>
            <el-input size="mini" @click.native="focus" v-if="ele.fieldName==='archive_ctg_no' "
              v-model="ruleForm[ele.fieldName]" placeholder="请输入" clearable readonly>
            </el-input>
            <!-- 文本框 -->
            <el-input size="mini" v-if="ele.ctype === 'text'" v-model="ruleForm[ele.fieldName]" type="textarea"
              placeholder="请输入" :rows="2" clearable></el-input>
            <!-- 下拉框 -->
            <el-select size="mini" style="width:100%" v-if="ele.ctype === 'select'  " v-model="ruleForm[ele.fieldName]"
              clearable placeholder="请选择">
              <el-option v-for="(op,index) in ele.note.note" :label="op.label" v-model="op.label" :key="index">
              </el-option>
            </el-select>
            <el-select size="mini" style="width:100%" v-if="ele.label=='全宗号'  " v-model="ruleForm[ele.fieldName]"
              clearable placeholder="请选择">
              <el-option v-for="(op,index) in fondsList" :label="op.codeName" v-model="op.fondscode" :key="index">
              </el-option>
            </el-select>
            <!-- 年 -->
            <el-date-picker size="mini" v-if="ele.ctype === 'datetime'" v-model="ruleForm[ele.fieldName]" type="date"
              placeholder="选择日期时间"></el-date-picker>
            <el-date-picker v-if="ele.ctype === 'datetimerange'" v-model="ruleForm[ele.fieldName]" type="datetimerange"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
        </el-form>
        <div class="btnClass">
          <el-button type="primary" size="mini" @click="sumbit('ruleForm')">
            保存
          </el-button>
          <el-button type="info" size="mini" @click="cancel"> 返回 </el-button>
        </div>
        <!-- </el-scrollbar> -->
      </div>
    </el-dialog>
    <el-dialog v-dialogDrag width="60%" title="选择实体分类号" :close-on-click-modal="false" :visible.sync="NumFlage"
      :before-close="cancels" top="10px">
      <div class="enClass">
        <el-card class="treeClass">
          <el-tree v-loading="treeLoading" highlight-current :data="treeData" :props="defaultProps" default-expand-all
            @node-click="handleNodeClick">
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <!--可以根据情况，以数据类型来显示不同的图标或图片-->
              <svg-icon icon-class="wjj" style="margin-right: 5px; color: rgb(255, 207, 92)"
                v-if="data.classType === 'L'" class="iconfont icon-folder-open-fill" />
              <svg-icon icon-class="wj" style="margin-right: 5px; color: rgb(255, 207, 92)" v-else
                class="iconfont icon-wenjian" />
              <span>{{ node.label }}</span>
            </span>
          </el-tree>
        </el-card>
        <el-card class="tableClass">
          <el-table border :data='entityData' max-height="300">
            <el-table-column align="center" type="index" width="60" label="序号"></el-table-column>
            <el-table-column align="center" prop="archiveScope" label="归档范围"></el-table-column>
            <el-table-column align="center" prop="retention" label="保管期限"></el-table-column>
          </el-table>
          <div style="padding:5px 0;text-align:right">
            <el-button @click="submitEntity" size="mini" type="primary" :disabled="JSON.stringify(treeRow)==='{}'">确定
            </el-button>
          </div>
        </el-card>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    getTableList,
  } from "@/api/system-management/fileSettings"
  import {
    message,
    clearObjValue,
    dateFormatT,
    dateFormat,
  } from "@/utils/common";
  import {
    mapState
  } from "vuex";
  export default {
    data() {
      return {
        widthStyle: {
          width: "",
        },
        NumFlage: false,
        treeData: [],
        defaultProps: {
          children: "childArchive",
          label: "codeAndName",
        },
        entityData: [],
        treeRow: {}
      };
    },
    filters: {
      widthTransformation(status) {
        const statusMap = {
          8: "33%",
          12: "50%",
          24: "100%",
        };
        return statusMap[status];
      },
    },
    props: {
      tablekey: {
        type: String,
        default: () => "",
      },
      tableItem: {
        type: Object,
        default: () => {},
      },
      treeType: {
        type: String,
        default: () => "",
      },
      diaFlage: {
        type: Boolean,
        default: () => false,
      },
      form: {
        type: Array,
        default: () => [],
      },
      fondsList: {
        type: Array,
        default: () => [],
      },
      ruleForm: {
        type: Object,
        default: () => {},
      },
      tableRow: {
        type: Object,
        default: () => {},
      },
      Alltable: {
        type: Array,
        default: () => [],
      },
      title: {
        type: String,
        default: () => "",
      },
    },
    computed: {
      ...mapState({
        treeList: (state) => state.description.treeList,
      }),
      treeLoading: {
        get() {
          return this.$store.state.description.treeLoading;
        },
        set(val) {
          this.$store.state.description.treeLoading = val;
        },
      },
    },
    methods: {
      //选择实体分类号
      submitEntity() {
        this.ruleForm.archive_ctg_no = this.treeRow.codeAndName
        this.$refs["ruleForm"].validateField('archive_ctg_no')
        this.cancels()
      },
      // 点击树节点
      handleNodeClick(data, node) {
        this.treeRow = data
        let info = {
          archiveCtgCode: data.archiveCtgCode,
          fondscode: this.ruleForm.fonds_no,
          page: 1,
          limit: 1000
        }
        getTableList(info).then(res => {
          this.entityData = res.body.list
        })
      },
      focus() {
        if (!this.ruleForm.fonds_no) {
          message('warning', '请先选择全宗号', 2000)
          return
        }
        if (!this.ruleForm.year) {
          message('warning', '请先输入年度', 2000)
          return
        }
        this.treeLoading = true
        let data = {
          fondscode: this.ruleForm.fonds_no,
          year: this.ruleForm.year
        }
        this.treeData = [{
          id: '-1',
          archiveCtgCode: "",
          archiveCtgName: "",
          archiveCtgSort: "1",
          childArchive: [],
          classType: "L"
        }]
        this.fondsList.forEach(item => {
          if (item.fondscode === this.ruleForm.fonds_no) {
            this.treeData[0].codeAndName = " [" + item.fondscode + "] " + item.fondsname
            this.treeData[0].archiveCtgCode = item.fondscode
          }
        })
        this.$store.dispatch('description/getArchiveCtgTree', data).then(res => {
          if (!this.treeList.length) {
            message("warning", "请先配置当前年份的实体分类号", 3000)
            return
          }
          this.treeData[0].childArchive = this.treeList
          this.NumFlage = true
        }).catch(e => {
          this.treeLoading = false
        })
      },
      sumbit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.form.forEach((item) => {
              if (item.ctype === "datetime") {
                this.ruleForm[item.fieldName] = this.ruleForm[item.fieldName] ?
                  dateFormat(this.ruleForm[item.fieldName]) :
                  "";
              } else if (item.ctype === "datetimerange") {
                this.ruleForm[item.fieldName] = this.ruleForm[item.fieldName] ?
                  dateFormatT(this.ruleForm[item.fieldName]).start +
                  "~" +
                  dateFormatT(this.ruleForm[item.fieldName]).end :
                  "";
              }
            });
            let params = {
              commonMap: {
                funcTypeCode: this.treeType,
                tableName: this.tableItem.tableName
              },
              fieldValueMap: {
                ...this.ruleForm,
                archive_flag: "已组卷",
              },
              conditionMap: {},
            };
            if (this.title === '新增') {
              this.$store.dispatch('description/saveObject', params).then(res => {
                this.cancel()
                this.$emit('getData', Number(this.tablekey))
              })
            } else {
              params.conditionMap.id = this.tableRow.id;
              this.$store.dispatch('description/updateObject', params).then(res => {
                this.cancel()
                this.$emit('getData', Number(this.tablekey))
              })
            }
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      //返回
      cancel() {
        this.$refs['ruleForm'].resetFields();
        this.$emit("cancel");
      },
      cancels() {
        this.NumFlage = false
        this.treeRow = {}
      }
    },
  };

</script>
<style lang="scss" scoped>
  .form {
    padding: 5px;
    // text-align: right;
    display: flex;
    flex-wrap: wrap;

    ::v-deep .el-form-item {
      margin-bottom: 15px;
    }
  }

  .add {
    height: 30px;
    line-height: 30px;
    display: flex;
    margin: 8px 0px;
  }

  .btnClass {
    padding: 0px 40px;
    text-align: right;
  }

  .labelTitle {
    width: 100px;
    text-align: right;
    font-size: 14px;
    font-weight: 600;
  }

  .enClass {
    display: flex;
    justify-content: space-around;

    .treeClass {
      width: 30%
    }

    .tableClass {
      width: 69%
    }
  }

</style>
