<template>
  <div id="add">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <el-button type="primary" size="mini" @click="back()">返回</el-button>
        </el-col>
        <el-col :span="24" class="two">
          <el-form :model="form" :rules="rules" ref="form" label-width="130px">
            <el-col :span="24">
              <el-col :span="12">
                <el-form-item label="行业类别" prop="industry_type">
                  <el-select v-model="form.industry_type" clearable placeholder="请选择" style="width: 100%">
                    <el-option label="保安监管" value="保安监管"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="12">
                <el-form-item label="企业名称" prop="company_name">
                  <el-input v-model="form.company_name" placeholder="请输入企业名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="企业编号" prop="company_num">
                  <el-input v-model="form.company_num" placeholder="请输入企业编号"></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="12">
                <el-form-item label="企业负责人" prop="company_personal">
                  <el-input v-model="form.company_personal" placeholder="请输入企业负责人"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="企业负责人编号" prop="company_personalnum">
                  <el-input v-model="form.company_personalnum" placeholder="请输入企业负责人编号"></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="12">
                <el-form-item label="检查方式" prop="inspect_type">
                  <el-select v-model="form.inspect_type" clearable placeholder="请选择" style="width: 100%">
                    <el-option label="日常检查" value="日常检查"></el-option>
                    <el-option label="案事件查处" value="案事件查处"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="检查时间" prop="inspect_time">
                  <el-date-picker
                    v-model="form.inspect_time"
                    placeholder="请选择"
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                    type="date"
                    style="width: 100%"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="12">
                <el-form-item label="检查人姓名" prop="inspect_name">
                  <el-input v-model="form.inspect_name" placeholder="请输入检查人姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="检查人警号" prop="inspect_namenum">
                  <el-input v-model="form.inspect_namenum" placeholder="请输入检查人警号"></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="12" class="longlabel">
                <el-form-item label="主要检查人员身份号码" prop="inspect_directornum">
                  <el-input v-model="form.inspect_directornum" placeholder="请输入检查人员身份号码"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="检查人职务" prop="inspect_post">
                  <el-input v-model="form.inspect_post" placeholder="请输入检查人职务"></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="12">
                <el-form-item label="检查机构" prop="mech_name">
                  <el-input v-model="form.mech_name" placeholder="请输入检查机构"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="longlabel">
                <el-form-item label="是否知道检查结果" prop="inspect_knowresult">
                  <el-radio-group v-model="form.inspect_knowresult">
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="24">
                <el-form-item label="检查事项" prop="inspect_matter">
                  <el-input v-model="form.inspect_matter" placeholder="请输入检查事项" type="textarea" :autosize="{ minRows: 4, maxRows: 6 }"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="发现问题" prop="inspect_question">
                  <el-input v-model="form.inspect_question" placeholder="请输入发现问题" type="textarea" :autosize="{ minRows: 4, maxRows: 6 }"></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="24">
                <el-form-item label="处理结果" prop="handle_result">
                  <el-checkbox-group v-model="form.handle_result">
                    <el-checkbox v-for="(item, index) in handle_resultList" :key="index" :label="item" :name="item"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="12">
                <el-form-item label="罚款金额(元)" prop="fine_money">
                  <el-input v-model.number="form.fine_money" type="number" placeholder="请输入罚款金额"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="longlabel">
                <el-form-item label="没收违法所得金额(元)" prop="illegal_money">
                  <el-input v-model.number="form.illegal_money" type="number" placeholder="请输入没收违法所得金额"></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="24">
                <el-form-item label="备注" prop="remark">
                  <el-input v-model="form.remark" placeholder="请输入备注" type="textarea" :autosize="{ minRows: 4, maxRows: 6 }"></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="8" class="longlabel">
                <el-form-item label="本次检查人员合影" prop="group_img">
                  <s-upload
                    :limit="1"
                    :data="form.group_img"
                    type="group_img"
                    :url="'/files/baoan/groupimg/upload'"
                    @upload="uplSuc"
                    @delete="uplDel"
                  ></s-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="longlabel">
                <el-form-item label="被检查单位正门照片" prop="door_img">
                  <s-upload :limit="1" :data="form.door_img" type="door_img" :url="'/files/baoan/doorimg/upload'" @upload="uplSuc" @delete="uplDel"></s-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="检查工作照片" prop="work_img">
                  <s-upload :limit="1" :data="form.work_img" type="work_img" :url="'/files/baoan/workimg/upload'" @upload="uplSuc" @delete="uplDel"></s-upload>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24" class="btn">
              <el-button type="danger" size="small" @click="back">取消保存</el-button>
              <el-button type="primary" size="small" @click="onSubmit('form')">提交保存</el-button>
            </el-col>
          </el-form>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const { handle_result, industry_type } = require('@common/src/layout/deploy/dict');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: daily_inspection } = createNamespacedHelpers('daily_inspection');
export default {
  name: 'add',
  props: {},
  components: {},
  data: function () {
    return {
      form: {
        handle_result: [],
        group_img: [],
        door_img: [],
        work_img: [],
      },
      rules: {
        industry_type: [{ required: false, message: '请选择', trigger: 'change' }],
        company_name: [{ required: false, message: '请输入企业名称', trigger: 'blur' }],
        company_num: [{ required: false, message: '请输入企业编号', trigger: 'blur' }],
        company_personal: [{ required: false, message: '请输入企业负责人', trigger: 'blur' }],
        company_personalnum: [{ required: false, message: '请输入企业负责人编号', trigger: 'blur' }],
        inspect_type: [{ required: false, message: '请选择', trigger: 'change' }],
        inspect_time: [{ required: false, message: '请选择', trigger: 'change' }],
        inspect_name: [{ required: false, message: '请输入检查人姓名', trigger: 'blur' }],
        inspect_namenum: [{ required: false, message: '请输入检查人警号', trigger: 'blur' }],
        inspect_directornum: [{ required: false, message: '请输入检查人员身份号码', trigger: 'blur' }],
        inspect_post: [{ required: false, message: '请输入检查人职务', trigger: 'blur' }],
        mech_name: [{ required: false, message: '请输入检查机构', trigger: 'blur' }],
        inspect_knowresult: [{ required: false, message: '请选择', trigger: 'change' }],
        inspect_matter: [{ required: false, message: '请输入检查事项', trigger: 'blur' }],
        inspect_question: [{ required: false, message: '请输入发现问题', trigger: 'blur' }],
        handle_result: [{ required: false, message: '请选择', trigger: 'change' }],
        fine_money: [{ required: false, message: '请输入罚款金额', trigger: 'blur' }],
        illegal_money: [{ required: false, message: '请输入没收违法所得金额', trigger: 'blur' }],
        remark: [{ required: false, message: '请输入备注', trigger: 'blur' }],
        group_img: [{ required: false, message: '请选择', trigger: 'change' }],
        door_img: [{ required: false, message: '请选择', trigger: 'change' }],
        work_img: [{ required: false, message: '请选择', trigger: 'change' }],
      },
      // 处理结果
      handle_resultList: handle_result,
      // 企业类型
      industry_typeList: industry_type,
    };
  },
  async created() {
    if (this.id) await this.search();
  },
  methods: {
    ...daily_inspection(['fetch', 'create', 'update']),
    async search() {
      let res = await this.fetch({ id: this.id });
      if (this.$checkRes(res)) {
        res.data.handle_result = JSON.parse(res.data.handle_result);
        this.$set(this, `form`, res.data);
      }
    },
    // 提交
    onSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let data = this.form;
          data.handle_result = JSON.stringify(data.handle_result);
          if (data.id) {
            let res = await this.update(data);
            if (this.$checkRes(res)) {
              this.$message({ type: `success`, message: `操作成功` });
              this.back();
            } else {
              this.$message({ type: `success`, message: `${res.errmsg}` });
            }
          } else {
            let res = await this.create(data);
            if (this.$checkRes(res)) {
              this.$message({ type: `success`, message: `操作成功` });
              this.back();
            } else {
              this.$message({ type: `success`, message: `${res.errmsg}` });
            }
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    // 返回
    back() {
      this.$router.push({ path: '/adminPolice/daily/rcjcgl' });
    },
    // 上传图片
    uplSuc({ type, data }) {
      this.$set(this.form, `${type}`, data.uri);
    },
    uplDel({ type }) {
      this.$set(this.form, `${type}`, null);
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    text-align: right;
    margin: 10px 0;
  }
  .two {
    .btn {
      text-align: center;
    }
    .longlabel {
      /deep/.el-form-item__label {
        line-height: 20px;
        padding: 0 12px;
      }
    }
  }
}
</style>
