<template>
  <!-- 上传 -->
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    @close="close"
    width="60%"
    append-to-body
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="82px">
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item prop="holderType" label="持证类型">
            <el-select
              style="width: 100%"
              v-model="form.holderType"
              @change="holderTypeChange"
              :disabled="true"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in holderTypeOptions"
                :key="index"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item prop="type" label="证件类型">
            <DictSelection
              v-model="form.type"
              dictName="客户/供应商资质类型"
            ></DictSelection>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item prop="code" label="证照编号">
            <el-input placeholder="请输入" v-model="form.code"></el-input>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="等级:" prop="level">
            <el-select style="width: 100%" v-model="form.level" filterable>
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in levelOptions"
                :key="index"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item prop="status" label="状态">
            <DictSelection
              v-model="form.status"
              dictName="规则状态"
            ></DictSelection>
          </el-form-item>
        </el-col>

        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item prop="holder" label="持证对象">
            <el-input v-model="form.holder" clearable readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item label="颁发时间">
            <el-date-picker
              style="width: 100%"
              v-model="form.enactorTime"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
          <el-form-item prop="date" label="有效期至">
            <el-date-picker
              style="width: 100%"
              v-model="form.date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 24 } : { span: 24 }">
          <el-form-item prop="fileObj" label="附件">
            <fileMain v-model="form.fileObj" />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { sm: 24 } : { span: 24 }">
          <el-form-item prop="remark" label="备注">
            <el-input
              placeholder="请输入"
              v-model="form.remark"
              type="textarea"
              :rows="3"
              :resize="`none`"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <productTable ref="productTableRef" />
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="save" type="primary">保 存</el-button>
      <el-button size="small" @click="close">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { saveOrEdit, getPhotoInfo } from '@/api/saleManage/contact';
  // import fileMain from '@/components/addDoc/index.vue';
  import { getCode } from '@/api/login/index.js';
  import productTable from './productTable.vue';

  // import { listOrganizations } from '@/api/system/organization';
  import { holderTypeOptions } from '@/enum/dict.js';
  const defaultForm = {
    code: '',
    holder: '',
    holderId: '',
    type: '',
    date: [],
    fileObj: [],
    holderType: '4',

    status: 1
  };
  export default {
    components: {
      // fileMain,
      productTable
    },
    //注册组件
    data() {
      return {
        dialogVisible: false,
        levelOptions: [
          {
            label: '初级',
            value: '1'
          },
          {
            label: '中级',
            value: '2'
          },
          {
            label: '高级',
            value: '3'
          }
        ],
        rules: {
          code: [
            { required: true, trigger: 'blur', message: '请输入证照编号' }
          ],
          date: [
            { required: true, trigger: 'change', message: '请选择有效期' }
          ],
          status: [
            { required: true, trigger: 'change', message: '请选择状态' }
          ],
          fileObj: [{ required: true, trigger: 'input', message: ' ' }]
        },
        form: { ...defaultForm },
        title: '新增',
        holderTypeOptions,
        companyData: [] //公司分类
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },

    methods: {
      open(row, type, holderData) {
        this.$refs.form && this.$refs.form.clearValidate();
        this.dialogVisible = true;
        if (type != 'add') {
          this.title = '修改';
          this.getInfo(row.id);
        } else {
          this.title = '新增';
          console.log(holderData, 'holderData');

          if (holderData.holderId) {
            this.form.holder = holderData.holder;
            this.form.holderId = holderData.holderId;
            this.form.holderType = holderData.holderType;
          }

          this.getOrderCode();
        }
      },
      async getOrderCode() {
        const data = await getCode('license_code');
        this.$set(this.form, 'code', data);
      },

      async getInfo(id) {
        const data = await getPhotoInfo(id);
        this.form = {
          ...data,
          type: data.type + '',
          date: [data.validityStartTime, data.validityEndTime],
          holderType: data.holderType || '1'
        };

        this.$refs.productTableRef.putTableValue(data.categorys || []);
      },

      close() {
        this.dialogVisible = false;
        this.form = { defaultForm };
        this.$refs.productTableRef.initData();
      },

      save() {
        this.$refs.form.validate((valid) => {
          if (!this.form.fileObj.length) {
            this.$message.warning('请上传附件！');

            return 
          }
          if (!valid) {
            return false;
          }

          this.loading = true;
          if (this.form.date?.length) {
            this.form.validityStartTime = this.form.date[0];
            this.form.validityEndTime = this.form.date[1];
          }

          const data = {
            ...this.form
          };
          delete data.date;
          let productTable = this.$refs.productTableRef.getTableValue();
          data.categorys = productTable || [];
          if (!this.form.holderId) {
            this.$emit('success', this.form);
            this.close();
          } else {
            saveOrEdit(data)
              .then((msg) => {
                this.loading = false;
                this.$message.success(msg);
                this.close();
                this.$emit('success');
              })
              .catch((e) => {
                this.loading = false;
              });
          }
        });
      },

      //选择公司分类
      handleChange(val) {
        if (!val) return (this.form.processTypeName = '');
        let node = this.$refs.tree.$refs.tree.getCurrentNode();
        this.form.holderId = node.id;
      }
    }
  };
</script>

<style lang="scss">
  .el-form-item {
    margin-bottom: 20px !important;
  }
</style>
