<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="500px"
    @close="close"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="100px"
      label-position="left"
    >
      <el-form-item label="选择站点" prop="deviceCode">
        <el-select v-model="form.deviceCode" filterable placeholder="选择站点">
          <el-option
            v-for="item in deviceData"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('apply.jzsj')" prop="asOfTime">
        <el-date-picker
          v-model="form.asOfTime"
          type="date"
          :placeholder="$t('defalult.xzrq')"
          @change="standardToTime"
        ></el-date-picker>
      </el-form-item>
      <el-form-item :label="$t('apply.ypsl')" prop="sampleQuantity">
        <el-input v-model="form.sampleQuantity"></el-input>
      </el-form-item>
      <el-form-item :label="$t('apply.ypqh')" prop="sampleBack">
        <el-select v-model="form.sampleBack" filterable placeholder="样品取回">
          <el-option
            v-for="item in sampleBackData"
            :key="item.dataCode"
            :label="item.dataValue"
            :value="item.dataCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('apply.yplx')" prop="sampleType">
        <el-select v-model="form.sampleType" filterable placeholder="样品类型">
          <el-option
            v-for="item in sampleTypeData"
            :key="item.dataCode"
            :label="item.dataValue"
            :value="item.dataCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('apply.jcxm')" prop="detectionItems">
        <el-select
          v-model="form.detectionItems"
          filterable
          multiple
          placeholder="检测项目"
        >
          <el-option
            v-for="item in detectionItemsData"
            :key="item.dataCode"
            :label="item.dataValue"
            :value="item.dataCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('apply.jcbg')" prop="detectionReport">
        <el-select
          v-model="form.detectionReport"
          filterable
          placeholder="检测报告"
        >
          <el-option
            v-for="item in detectionReportData"
            :key="item.dataCode"
            :label="item.dataValue"
            :value="item.dataCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('apply.bgcj')" prop="reportIssued">
        <el-select
          v-model="form.reportIssued"
          filterable
          placeholder="报告出具"
        >
          <el-option
            v-for="item in reportIssuedData"
            :key="item.dataCode"
            :label="item.dataValue"
            :value="item.dataCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('apply.bgyt')" prop="reportUse">
        <el-select v-model="form.reportUse" filterable placeholder="报告用途">
          <el-option
            v-for="item in reportUseData"
            :key="item.dataCode"
            :label="item.dataValue"
            :value="item.dataCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('alarm.bz')" prop="remark">
        <el-input v-model="form.remark" type="textarea"></el-input>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getDictData, doEdit, doAdd } from '@/api/apply';
import { getDevices } from '@/api/task';
import { getDate } from '@/common/times';
export default {
  data() {
    return {
      form: {
        id: '',
        deviceCode: '',
        sampleQuantity: '',
        sampleBack: '',
        sampleType: '',
        detectionItems: '',
        detectionReport: '',
        reportIssued: '',
        reportUse: '',
        asOfTime: '',
        remark: '',
      },
      rules: {
        deviceCode: [
          { required: true, trigger: 'change', message: '请选择站点' },
        ],
        asOfTime: [
          { required: true, trigger: 'change', message: '请选择截至时间' },
        ],
        sampleQuantity: [
          { required: true, trigger: 'blur', message: '请输入样品数量' },
        ],
        detectionItems: [
          { required: true, trigger: 'change', message: '请选择检测项目' },
        ],
        detectionReport: [
          { required: true, trigger: 'change', message: '请选择检测报告' },
        ],
        reportIssued: [
          { required: true, trigger: 'change', message: '请选择报告出具' },
        ],
        reportUse: [
          { required: true, trigger: 'change', message: '请选择报告用途' },
        ],
      },
      title: '',
      dialogFormVisible: false,
      sampleBackData: [],
      sampleTypeData: [],
      detectionItemsData: [],
      detectionReportData: [],
      reportIssuedData: [],
      reportUseData: [],
      projectId: '',
      deviceData: [],
    };
  },
  created() {
    this.projectId = sessionStorage.getItem('projectId');
  },
  methods: {
    async getDictData() {
      const { data } = await getDictData();
      this.sampleBackData = data.sampleBack;
      this.sampleTypeData = data.sampleType;
      this.detectionItemsData = data.detectionItems;
      this.detectionReportData = data.detectionReport;
      this.reportIssuedData = data.reportIssued;
      this.reportUseData = data.reportUse;
    },
    //站点
    async getDevices() {
      const { data } = await getDevices({ projectId: this.projectId });
      this.deviceData = data;
    },
    //标准时间转yyyy-mm-dd
    standardToTime() {
      this.form.asOfTime = getDate(this.form.asOfTime);
    },
    showEdit(row) {
      this.getDictData();
      this.getDevices();
      if (!row) {
        this.title = '添加';
      } else {
        this.title = '编辑';
        this.menuId = row.id;
        this.ruleForm = Object.assign({}, row);
        var form = Object.assign({}, row);
        this.form.id = form.id;
        this.form.sampleQuantity = form.sampleQuantity;
        if (form.device != null) {
          this.form.deviceCode = form.device.code;
        }
        if (form.sampleBack != null) {
          this.form.sampleBack = form.sampleBack.dataCode;
        }
        if (form.sampleType != null) {
          this.form.sampleType = form.sampleType.dataCode;
        }
        if (form.detectionItems != null) {
          this.form.detectionItems = form.detectionItems.dataCode;
        }
        if (form.detectionReport != null) {
          this.form.detectionReport = form.detectionReport.dataCode;
        }
        if (form.reportIssued != null) {
          this.form.reportIssued = form.reportIssued.dataCode;
        }
        if (form.reportUse != null) {
          this.form.reportUse = form.reportUse.dataCode;
        }
        this.form.asOfTime = form.asOfTime;
        this.form.remark = form.remark;
        this.setDetectionItems(form.detectionItems);
      }
      this.dialogFormVisible = true;
    },
    setDetectionItems(data) {
      var arr = [];
      for (var i = 0; i < data.length; i++) {
        if (data[i] != null) {
          arr.push(data[i].dataCode);
        }
      }
      this.form.detectionItems = arr;
    },
    close() {
      this.$refs['form'].resetFields();
      this.form = this.$options.data().form;
      this.dialogFormVisible = false;
      this.$emit('fetch-data');
    },
    save() {
      this.$refs['form'].validate(async valid => {
        if (valid) {
          var detectionItems = this.form.detectionItems;
          if (detectionItems) {
            this.form.detectionItems = detectionItems.join(',');
          }
          if (this.form.id) {
            const { msg } = await doEdit(this.form);
            this.$notify({
              title: msg,
              type: 'success',
            });
          } else {
            delete this.form.id;
            const { msg } = await doAdd(this.form);
            this.$notify({
              title: msg,
              type: 'success',
            });
          }
          this.$refs['form'].resetFields();
          this.dialogFormVisible = false;
          this.$parent.fetchData();
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style>
.select {
  width: 100%;
}
</style>
