<template>
  <el-form class="create-audit-item" :model="auditData" :rules="auditDataRules" ref="auditData" label-width="110px">
    <el-form-item label="审核组名称" prop="auditGroupIds">
      <el-select v-model="auditData.auditGroupIds" multiple collapse-tags style="width: 480px">
        <el-option v-for="el in auditGroupList" :key="el.auditGroupId" :value="el.auditGroupId" :label="el.auditGroupName"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="审核事项" prop="auditTypes">
      <el-checkbox-group v-model="auditData.auditTypes">
        <el-checkbox class="audit-types" v-for="el in auditTypes" :key="el.type" :label="el.type">
          <p class="audit-type-title">{{ el.title }}</p>
          <p class="audit-type-desc">{{ el.desc }}</p>
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item style="margin-top: 50px">
      <el-button type="primary" :loading="loading" @click="onSave">{{ auditData.auditItemId ? '保存' : '确认新建' }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import auditTypes from './audit-types';
import fetch from '@/api/review';
const { addAuditItem, editAuditItem, auditItemDetail, getAuditGroupList } = fetch;
export default {
  name: 'CreateAuditItem',
  data() {
    return {
      loading: false,
      // 审核组列表
      auditGroupList: [],
      // 审核事项类型列表
      auditTypes,
      // 审核事项详情数据
      auditData: {
        auditGroupIds: [], // aaa,bbb,cccc
        auditTypes: [], // 1,2,3  1、导购账号绑定 2、门店导购解绑，3导购账号新增
        wxEnterpriseId: '',
        auditItemId: ''
      },
      auditDataRules: {
        auditGroupIds: [ { required: true, message: '请选择审核组', trigger: 'change' } ],
        auditTypes: [ { required: true, message: '请选择审核事项', trigger: 'change' } ]
      }
    };
  },
  created() {
    const { auditItemId } = this.$route.query;
    const haobanUser = JSON.parse(localStorage.getItem('haoBanUser') || '{}');
    this.auditData.wxEnterpriseId = haobanUser.wxEnterpriseId;
    this.$emit('showTab', '/audit-item-list');
    if (auditItemId) {
      this.getAuditItemDetail(auditItemId);
    }
    this.getAuditGroupList();
  },
  methods: {
    getAuditGroupList() {
      getAuditGroupList({ wxEnterpriseId: this.auditData.wxEnterpriseId }).then(res => {
        this.auditGroupList = res.result || [];
      });
    },
    getAuditItemDetail(auditItemId) {
      auditItemDetail({ auditItemId }).then(res => {
        const { auditItemId, auditGroupId, auditTypes } = res.result || {};
        this.auditData.auditItemId = auditItemId;
        if (typeof auditTypes == 'string') {
          this.auditData.auditTypes =  auditTypes.split(',');
        }
        // 新建、编辑保存的时候审核组可以多选，编辑回显的时候只有一个审核组
        if (typeof auditGroupId == 'string' || typeof auditGroupId == 'number') {
          this.auditData.auditGroupIds = [ auditGroupId ];
        }
      });
    },
    // 新建、编辑审核事项保存
    onSave() {
      this.$refs.auditData.validate(vali => {
        if (!vali) return;
        const { auditGroupIds, auditTypes, wxEnterpriseId, auditItemId } = this.auditData;
        const params = {
          auditGroupIds: auditGroupIds.join(','),
          auditTypes: auditTypes.join(','),
          wxEnterpriseId
        };
        if (auditItemId) {
          params.auditItemId = auditItemId;
          editAuditItem(params).then(succ.bind(this, '保存成功！')).finally(() => this.loading = false);
        } else {
          addAuditItem(params).then(succ.bind(this, '新建成功！')).finally(() => this.loading = false);
        }
        function succ(message) {
          this.$message.success(message);
          this.$router.go(-1);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.create-audit-item {
  padding: 30px;
  min-height: 100%;
  background-color: #fff;
}
.audit-types {
  display: block;
  width: 260px;
  &+.audit-types {
    margin-top: 10px;
  }
  /deep/.el-checkbox__input {
    padding-top: 4px;
    vertical-align: top;
  }
  .audit-type-title {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: @gray02;
  }
  .audit-type-desc {
    font-size: 12px;
    line-height: 22px;
    color: @gray03;
  }
}
</style>
