<template>
  <div id="index">
    <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" ref="form" :rules="rules" label-position="left" label-width="auto">
            <el-col :span="12">
              <el-form-item label="企业类型">
                <el-select v-model="form.purpose" clearable filterable placeholder="请选择" style="width: 100%" @change="changeP">
                  <el-option v-for="(item, index) in purposeList" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设置账号">
                <el-input v-model="form.phone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="安全邮箱">
                <el-input v-model="form.email"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业名称">
                <el-input v-model="form.company"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="详细地址">
                <el-input v-model="form.addres"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属区县">
                <el-select v-model="form.belong_city" clearable filterable placeholder="请选择" style="width: 100%" @change="changeP">
                  <el-option v-for="(item, index) in belong_cityList" :key="index" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="管辖单位">
                <el-select v-model="form.tube_company" filterable placeholder="请选择" clearable style="width: 100%">
                  <el-option-group v-for="(item, index) in getList('tube_companyList')" :key="index" :label="item.label">
                    <el-option v-for="(ci, cindex) in item.children" :key="`child-${cindex}`" :label="ci.name" :value="ci.id"></el-option>
                  </el-option-group>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="法人代表人姓名">
                <el-input v-model="form.legal_personal"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="法人代表人联系方式">
                <el-input v-model="form.legal_phone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="法人代表人公民身份号码">
                <el-input v-model="form.legal_card"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="法人户籍地详址">
                <el-input v-model="form.legal_hjd"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="法人现住地详址">
                <el-input v-model="form.legal_xzd"></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="法人代表人职务">
                <el-input v-model="form.legal_zw"></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="24">
              <el-form-item label="保安服务类型">
                <el-checkbox-group v-model="form.baoan_sevicetype">
                  <el-checkbox v-for="item in baoan_sevicetypeList" :key="item" :label="item"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="申请报告">
                <el-input v-model="form.apply_report" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" maxlength="500" show-word-limit></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="营业执照经营范围">
                <el-input v-model="form.company_yyzzjyfw" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" maxlength="500" show-word-limit></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业组织机构代码">
                <el-input v-model="form.zhjgdm"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="类型">
                <el-input v-model="form.money_type"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮政编码">
                <el-input v-model="form.post_num"></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="传真">
                <el-input v-model="form.fax"></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="统一社会信用代码">
                <el-input v-model="form.company_yyzzzch"></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="保安服务许可证号">
                <el-input v-model="form.company_xkzpzwh"></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="注册资金">
                <el-input v-model="form.register_money"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分管保安负责人姓名">
                <el-input v-model="form.charge_personal"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分管保安负责人身份号码">
                <el-input v-model="form.charge_card"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分管保安负责人联系电话">
                <el-input v-model="form.charge_phone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分管保安负责人微信联系方式">
                <el-input v-model="form.charge_wx"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分管保安负责人户籍地详址">
                <el-input v-model="form.charge_hjd"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分管保安负责人现住地详址">
                <el-input v-model="form.charge_xzd"></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="经营负责人联系电话">
                <el-input v-model="form.charge_phone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="经营负责人职务">
                <el-input v-model="form.charge_zw"></el-input>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="12">
              <el-form-item label="营业执照发证机关">
                <el-input v-model="form.company_yyzzfzjg"></el-input>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="12">
              <el-form-item label="成立日期">
                <el-date-picker v-model="form.establish_date" placeholder="选择择" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%">
                </el-date-picker>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="12">
              <el-form-item label="营业执照截止日期">
                <el-date-picker v-model="form.company_yyzzjzrq" placeholder="选择择" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%">
                </el-date-picker>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="12">
              <el-form-item label="单位性质">
                <el-input v-model="form.company_nature"></el-input>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="12">
              <el-form-item label="单位组织机构类型">
                <el-input v-model="form.zhjglx"></el-input>
              </el-form-item>
            </el-col> -->
            <template v-if="purpose_id == 'purpose_one' || purpose_id == 'purpose_six'">
              <el-col :span="12">
                <el-form-item label="场地面积">
                  <el-input v-model="form.land_rice"></el-input>
                </el-form-item>
              </el-col>
            </template>
            <template v-else-if="purpose_id == 'purpose_two'">
              <el-col :span="12">
                <el-form-item label="发起人类型">
                  <el-input v-model="form.initiator_type"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="培训规模">
                  <el-input v-model="form.train_num"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="校长或院长姓名">
                  <el-input v-model="form.school_personal"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="校长或院长身份证号">
                  <el-input v-model="form.school_card"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="校长或院长联系电话">
                  <el-input v-model="form.school_phone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="师资人数">
                  <el-input v-model="form.teache_num"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="保安专业师资人数">
                  <el-input v-model="form.major_teanum"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="校园面积">
                  <el-input v-model="form.campus_area"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="校舍面积">
                  <el-input v-model="form.schoolhouse_area"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="固定资产">
                  <el-input v-model="form.fixed_money"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否提供住宿">
                  <el-input v-model="form.is_stay"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="培训目标">
                  <el-input v-model="form.train_target"></el-input>
                </el-form-item>
              </el-col>
            </template>
            <template v-else-if="purpose_id == 'purpose_four'">
              <!-- <el-col :span="12">
                <el-form-item label="保安主管部门名称">
                  <el-input v-model="form.zxzy_depart"></el-input>
                </el-form-item>
              </el-col> -->
            </template>
            <el-col :span="24" class="btn">
              <el-button type="primary" size="mini" @click="onSubmit('form')">提交保存</el-button>
            </el-col>
          </el-form>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const { purpose, belong_city, baoan_sevicetype, baoan_sevicetype_zx } = require('@common/src/layout/deploy/dict');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('company_base');
const { mapActions: dept } = createNamespacedHelpers('police_department');
export default {
  name: 'index',
  props: {},
  components: {},
  data: function () {
    return {
      // 详细信息
      form: {
        baoan_sevicetype: [],
      },
      rules: {},
      // 企业类型
      purposeList: purpose,
      // 所属区县
      belong_cityList: belong_city,
      // 管辖单位
      tube_companyList: [],
      // 保安服务类型
      baoan_sevicetypeList: [],
    };
  },
  async created() {
    await this.initDept();
    if (this.id) await this.search();
  },
  methods: {
    ...mapActions(['fetch', 'update']),
    ...dept({ deptQuery: 'query' }),
    async search() {
      let res = await this.fetch({ id: this.id });
      if (this.$checkRes(res)) {
        let data = _.cloneDeep(res.data);
        if (data && data.baoan_sevicetype) data.baoan_sevicetype = JSON.parse(data.baoan_sevicetype);
        this.$set(this, `form`, data);
      }
    },
    async onSubmit() {
      let dup = _.cloneDeep(this.form);
      dup.baoan_sevicetype = JSON.stringify(dup.baoan_sevicetype);
      let res = await this.update(dup);
      if (this.$checkRes(res)) {
        this.$message({ type: `success`, message: `信息维护成功` });
        this.back();
      }
    },
    changeP(value) {
      let data = this.purposeList.find((i) => i.value == value);
      if (data) this.$set(this.form, `purpose`, data.label);
      this.$set(this.form, `purpose_id`, data.value);
      this.$emit('changeP', data.value);
      if (data.value == 'purpose_four') this.$set(this, `baoan_sevicetypeList`, baoan_sevicetype_zx);
      else this.$set(this, `baoan_sevicetypeList`, baoan_sevicetype);
    },
    /**
     * 初始化管辖单位列表,分组
     * 保安服务类型
     */
    async initDept() {
      const res = await this.deptQuery();
      if (this.$checkRes(res)) {
        // 按type分类,1:市局;2,分局;3,派出所
        let mid = _.cloneDeep(res.data);
        mid = _.groupBy(mid, 'type');
        let data = [];
        let keys = ['3'];
        for (const key of keys) {
          let label = '';
          let children;
          if (key === '1') {
            label = '市局';
            children = mid[key];
          } else if (key === '2') {
            label = '分局';
            children = mid[key];
          } else if (key === '3') {
            label = '派出所';
            children = mid[key];
          }
          if (children) data.push({ label, children });
        }
        this.$set(this, `tube_companyList`, data);
      }
      this.changeP(this.purpose_id);
    },
    getList(listName) {
      return _.get(this, listName, []);
    },
    // 返回
    back() {
      this.$router.go(-1);
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
    purpose_id() {
      return this.$route.query.purpose_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: 0 0 10px 0;
  }
  .two {
    .btn {
      text-align: center;
    }
  }
}
</style>
