<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="8">
                <el-form-item label="管辖单位名称" prop="tube_company">
                  <el-select v-model="form.tube_company" clearable placeholder="请选择" style="width: 100%" @change="selectTub">
                    <el-option v-for="(item, index) in tube_companyList" :key="index" :label="item.name" :value="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="被投诉单位类型" prop="cover_complaint_comtype">
                  <el-select v-model="form.cover_complaint_comtype" clearable placeholder="请选择" style="width: 100%" @change="selectType">
                    <el-option v-for="(item, index) in cover_complaint_comtypeList" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="被投诉单位名称" prop="cover_complaint_com">
                  <el-select v-model="form.cover_complaint_com" clearable placeholder="请选择" style="width: 100%">
                    <el-option v-for="(item, index) in cover_complaint_comList" :key="index" :label="item.company" :value="item.company"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="8" class="longlabel">
                <el-form-item label="被投诉保安员姓名" prop="cover_complaint_comname">
                  <el-input v-model="form.cover_complaint_comname" placeholder="请输入被投诉保安员姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="longlabel">
                <el-form-item label="被投诉保安员身份号码" prop="cover_complaint_comncard">
                  <el-input v-model="form.cover_complaint_comncard" placeholder="请输入被投诉保安员身份号码"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="投诉日期" prop="complaint_date">
                  <el-date-picker
                    v-model="form.complaint_date"
                    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="8">
                <el-form-item label="投诉人姓名" prop="complaint_personal">
                  <el-input v-model="form.complaint_personal" placeholder="请输入投诉人姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="投诉人联系电话" prop="complaint_phone">
                  <el-input v-model="form.complaint_phone" placeholder="请输入投诉人联系电话"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="投诉人单位" prop="complaint_company">
                  <el-input v-model="form.complaint_company" placeholder="请输入投诉人单位"></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="8">
                <el-form-item label="投诉人身份号码" prop="complaint_personalcard">
                  <el-input v-model="form.complaint_personalcard" placeholder="请输入投诉人身份号码"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="投诉人证件类型" prop="complaint_personaltype">
                  <el-select v-model="form.complaint_personaltype" clearable placeholder="请选择" style="width: 100%">
                    <el-option v-for="(item, index) in complaint_personaltypeList" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="投诉人证件号码" prop="complaint_personalcert">
                  <el-input v-model="form.complaint_personalcert" placeholder="请输入投诉人证件号码"></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="24">
                <el-form-item label="投诉内容" prop="content">
                  <el-input v-model="form.content" 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">
                <el-form-item label="受理单位名称" prop="accept_company">
                  <el-input v-model="form.accept_company" placeholder="请输入受理单位名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="受理人" prop="accept_personal">
                  <el-input v-model="form.accept_personal" placeholder="请输入受理人"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="受理日期" prop="accept_date">
                  <el-date-picker v-model="form.accept_date" 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" 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 { purpose, complaint_personaltype } = require('@common/src/layout/deploy/dict');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: complaints_info } = createNamespacedHelpers('complaints_info');
const { mapActions: police_department } = createNamespacedHelpers('police_department');
const { mapActions: company_base } = createNamespacedHelpers('company_base');

export default {
  name: 'add',
  props: {},
  components: {},
  data: function () {
    return {
      form: {},
      rules: {
        tube_company: [{ required: true, message: '请选择', trigger: 'change' }],
        cover_complaint_comtype: [{ required: true, message: '请选择', trigger: 'change' }],
        cover_complaint_com: [{ required: true, message: '请输入被投诉单位名称', trigger: 'blur' }],
        cover_complaint_comname: [{ required: true, message: '请输入被投诉保安员姓名', trigger: 'blur' }],
        cover_complaint_comncard: [{ required: true, message: '请输入被投诉保安员身份号码', trigger: 'blur' }],
        complaint_date: [{ required: true, message: '请选择', trigger: 'change' }],
        complaint_personal: [{ required: true, message: '请输入投诉人姓名', trigger: 'blur' }],
        complaint_phone: [{ required: true, message: '请输入投诉人联系电话', trigger: 'blur' }],
        complaint_company: [{ required: true, message: '请输入投诉人单位', trigger: 'blur' }],
        complaint_personalcard: [{ required: true, message: '请输入投诉人身份号码', trigger: 'blur' }],
        complaint_personaltype: [{ required: true, message: '请选择', trigger: 'change' }],
        complaint_personalcert: [{ required: true, message: '请输入投诉人证件号码', trigger: 'blur' }],
        content: [{ required: true, message: '请输入投诉内容', trigger: 'blur' }],
        complaint_personalcard: [{ required: true, message: '请输入投诉内容', trigger: 'blur' }],
        accept_company: [{ required: true, message: '请输入受理单位名称', trigger: 'blur' }],
        accept_personal: [{ required: true, message: '请输入受理人', trigger: 'blur' }],
        accept_date: [{ required: true, message: '请选择', trigger: 'change' }],
      },
      // 管辖单位
      tube_companyList: [],
      cover_complaint_comtypeList: purpose,
      complaint_personaltypeList: complaint_personaltype,
      // 投诉单位
      cover_complaint_comList: [],
      companyList: [],
    };
  },
  async created() {
    this.searchOther();
    if (this.id) await this.search();
  },
  methods: {
    ...complaints_info(['fetch', 'create', 'update']),
    ...police_department({ deptQuery: 'query' }),
    ...company_base({ companyQuery: 'query' }),
    async search() {
      let res = await this.fetch({ id: this.id });
      if (this.$checkRes(res)) {
        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;
        }
      });
    },
    // 选择管辖单位下的企业
    selectTub(value) {
      let list = this.companyList.filter((i) => i.tube_company == value);
      if (list) this.$set(this, `cover_complaint_comList`, list);
    },
    // 选择企业类型
    selectType(value) {
      let list = this.companyList.filter((i) => i.purpose == value && i.tube_company == this.form.tube_company);
      if (list) this.$set(this, `cover_complaint_comList`, list);
    },
    // 返回
    back() {
      this.$router.push({ path: '/adminPolice/complaint/tsxxcx' });
    },
    // 查询管辖单位
    async searchOther() {
      let res = await this.deptQuery();
      if (this.$checkRes(res)) {
        this.$set(this, `tube_companyList`, res.data);
      }
      res = await this.companyQuery();
      if (this.$checkRes(res)) {
        this.$set(this, `companyList`, res.data);
      }
    },
  },
  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>
