<!-- 用户编辑弹窗 -->
<template>
  <ele-modal
    width="960px"
    :visible="visible"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    :title="isView ? '查看工种' : isUpdate ? '修改工种' : '添加工种'"
    @update:visible="updateVisible"
  >
    <header-title title="基本信息"></header-title>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="名称:" prop="name">
            <el-input
              :disabled="isView"
              v-model="form.name"
              clearable
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>

        <el-col :span="10">
          <el-form-item label="类型:" prop="type">
            <el-select
              style="width: 100%"
              :disabled="isView"
              v-model="form.type"
              filterable
            >
              <el-option
                v-for="item in typeList"
                :key="item.dictCode"
                :label="item.dictValue"
                :value="item.dictCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="编码:" prop="code">
            <el-input
              :disabled="isView"
              v-model="form.code"
              clearable
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>

        <el-col :span="10">
          <el-form-item label="等级:" prop="level">
            <el-select
              style="width: 100%"
              :disabled="isView"
              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-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="标准工时费:">
            <div class="hourCostStyle">
              <el-input
                style="width: 80%"
                :disabled="isView"
                v-model="form.hourCost"
                clearable
                placeholder="请输入"
              />
              <el-select :disabled="isView" v-model="form.money">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="(item, index) in moneyOptions"
                  :key="index"
                >
                </el-option>
              </el-select>
              <div>/</div>
              <el-select :disabled="isView" v-model="form.date">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="(item, index) in timeOptions"
                  :key="index"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col :span="20">
          <el-form-item label="资质:" prop="aptitude">
            <el-input
              v-model="form.aptitude"
              placeholder="请输入内容"
              clearable
              readonly
              @clear="handleClear"
              @click.native="handleDeliveryNote()"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row> -->
    </el-form>
    <aptitudeDialog
      ref="aptitudeDialogRef"
      @success="chooseAptitude"
    ></aptitudeDialog>
    <template v-slot:footer>
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button v-if="isView" type="primary" @click="updateVisible(false)">
        确定
      </el-button>
      <el-button v-else type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </template>
  </ele-modal>
</template>

<script>
  import {
    saveJobTypes,
    getProfessiongetById,
    updateProfessiongetById
  } from '@/api/factoryModel';
  import aptitudeDialog from './aptitudeDialog.vue';
  export default {
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      data: Object,
      isView: Boolean,
      controlList: Array,
      typeList: Array
    },
    components: {
      aptitudeDialog
    },
    data() {
      const defaultForm = function () {
        return {
          id: '',
          aptitude: '',
          code: '',
          hourCost: '',
          level: '',
          name: '',
          type: '',
          status: 0,
          money: '元',
          date: '小时'
        };
      };
      return {
        defaultForm,
        // 表单数据
        form: defaultForm(),
        moneyOptions: [
          {
            label: '元',
            value: '元'
          }
        ],
        timeOptions: [
          {
            label: '小时',
            value: '小时'
          },
          {
            label: '天',
            value: '天'
          },
          {
            label: '月',
            value: '月'
          }
        ],
        levelOptions: [
          {
            label: '初级',
            value: '1'
          },
          {
            label: '中级',
            value: '2'
          },
          {
            label: '高级',
            value: '3'
          }
        ],
        // 表单验证规则
        rules: {
          name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
          code: [{ required: true, trigger: 'blur', message: '请输入编码' }],
          hourCost: [
            { required: true, trigger: 'blur', message: '请输入标准工时费' }
          ],
          level: [{ required: true, message: '请选择等级', trigger: 'change' }],
          type: [{ required: true, message: '请选择类型', trigger: 'change' }]
        },
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false,
        chooseItem: null
      };
    },
    methods: {
      handleClear() {
        this.form.aptitude = '';
        this.form.certificationId = '';
      },
      chooseAptitude(data) {
        this.form.aptitude = data.map((item) => item.name).join(',');
        this.form.certificationId = data.map((item) => item.id).join(',');
      },
      handleDeliveryNote() {
        this.$refs.aptitudeDialogRef.open();
      },
      /* 保存编辑 */
      save() {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
          console.log(this.form);
          if (!this.isUpdate) {
            delete this.form.id;
          }
          this.form.unit = this.form.money + '/' + this.form.date;
          this.loading = true;
          let apiStr = null;
          if (this.isUpdate) {
            apiStr = updateProfessiongetById;
          } else {
            apiStr = saveJobTypes;
          }
          apiStr(this.form)
            .then((msg) => {
              this.loading = false;
              this.$message.success((this.isUpdate ? '修改' : '新建') + '成功');
              this.updateVisible(false);
              this.$emit('done');
            })
            .catch((e) => {
              this.loading = false;
              // this.$message.error(e.message);
            });
        });
      },
      /* 更新visible */
      updateVisible(value) {
        this.form = { ...this.defaultForm() };
        this.$emit('update:visible', value);
      }
    },

    watch: {
      async visible(visible) {
        if (visible) {
          if (this.data) {
            const res = await getProfessiongetById(this.data.id);
            console.log(res);
            this.$util.assignObject(this.form, {
              ...res
            });
            this.form.money = res.unit.split('/')[0];
            this.form.date = res.unit.split('/')[1];
            this.isUpdate = true;
            console.log(this.form);
          } else {
            this.form = { ...this.defaultForm() };
            this.isUpdate = false;
          }
        } else {
          this.$refs.form.clearValidate();
          this.form = { ...this.defaultForm() };
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .hourCostStyle {
    display: flex;
    > div {
      margin-right: 10px;
    }
    > div:last-child {
      margin-right: 0;
    }
  }
</style>
