<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="addRoleDialog"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="1000px"
  >
    <div class="main_container">
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addForm"
        label-width="120px"
      >
        <el-card
          shadow="never"
          header="基本信息"
          body-style="padding: 22px 22px 0 22px;"
        >
          <div class="form-wrap">
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="编码"
                  prop="code"
                  style="margin-bottom: 22px"
                >
                  <el-input
                    v-model="addForm.code"
                    type="text"
                    placeholder="请输入"
                    :disabled=" openType == 'edit' "
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="名称"
                  prop="name"
                  style="margin-bottom: 22px"
                >
                  <el-input
                    v-model="addForm.name"
                    type="text"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label="描述"
                  prop="remark"
                  style="margin-bottom: 22px"
                >
                  <el-input
                    v-model="addForm.remark"
                    placeholder="请输入"
                    maxlength="100"
                    show-word-limit
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <el-card
          shadow="never"
          header="编码配置"
          body-style="padding: 22px 22px 0 22px;"
        >
          <myTable
            ref="myTable"
            :codeConfigurationList="codeConfigurationList"
          ></myTable>
        </el-card>
      </el-form>
    </div>
    <div class="btns">
      <el-button type="primary" size="small" @click="submitAdd">保存</el-button>
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {
    saveNew,
    getCodeDetail,
    checkCode
  } from '@/api/codeManagement/index';
  import myTable from './myTable.vue';
  export default {
    components: {
      myTable
    },
    data() {
      return {
        addRoleDialog: false,
        dialogTitle: '新建编码规则',
        addForm: {
          name: '',
          code: '',
          remark: ''
        },
        addFormRules: {
          name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
          code: [
            {
              required: true,
              trigger: 'blur',
              validator: (_rule, value, callback) => {
                if (!value) {
                  return callback(new Error('请输入编码'));
                }
                checkCode(this.addForm.code)
                  .then((res) => {
                    if (res != true && res != this.addForm.id) {
                      callback(new Error('编号已经存在'));
                    } else {
                      callback();
                    }
                  })
                  .catch(() => {
                    callback();
                  });
              }
            }
          ]
        },
        codeConfigurationList: [],
        openType: 'add'
      };
    },
    created() {
      // this.getrecipientDep()
    },
    methods: {
      handleClose(){
         this.addRoleDialog = false
         this.addForm = {
           name: '',
           code: '',
           remark: ''
         }
      },
      open(type, row) {
        if (type == 'add') {
          this.dialogTitle = '新建编码规则';
          this.codeConfigurationList = [];
        } else if (type == 'edit') {
          this.dialogTitle = '编辑编码规则';
          getCodeDetail(row.id).then((res) => {
            this.addForm = { ...res };
            if (this.addForm.codeConfigurationList)
              delete this.addForm.codeConfigurationList;
            this.codeConfigurationList = res.codeConfigurationList;
          });
        }
        this.addRoleDialog = true;
        this.openType = type;
      },
      submitAdd() {
        const a1 = new Promise((resolve, reject) => {
          this.$refs.addForm.validate((valid) => {
            if (valid) resolve();
          });
        });
        const a2 = new Promise((resolve, reject) => {
          this.$refs.myTable.validateForm((valid) => {
            if (valid) resolve();
          });
        });
        Promise.all([a1, a2]).then(() => {
          const codeConfigurationList = this.$refs.myTable.getTableValue();
          if (!codeConfigurationList.length) {
            this.$message.error('至少有1项配置内容');
            return;
          }
          // codeConfigurationList.map(item=>{
          //    item.type = item.type.code
          // })
          let par = {
            code: this.addForm.code,
            name: this.addForm.name,
            remark: this.addForm.remark,
            codeConfigurationList: codeConfigurationList,
            codeManageTreeId: 1
          };
          if (this.openType == 'edit') {
            par.id = this.addForm.id;
          }
          saveNew(par)
            .then((res) => {
              console.log('res', res);
              this.loading = false;
              // this.addRoleDialog = false;
              this.$message.success(res);
              this.$emit('done');
              this.handleClose();
            })
            .catch((e) => {
              this.loading = false;
              // this.$message.error(e.message);
            });
        });
      },
    }
  };
</script>

<style lang="scss" scoped>
  .dialog_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .btns {
    text-align: right;
    margin: 10px 0;
  }
</style>
