<template>
  <ai-detail>
    <!-- 标题 -->
    <template slot="title">
      <ai-title
          title="新增新社会组织"
          isShowBottomBorder
          isShowBack
          @onBackClick="cancel(false)"
      />
    </template>

    <!-- 内容 -->
    <template slot="content">
      <el-form
          :model="formData"
          ref="ruleForm"
          :rules="formRules"
          label-width="140px"
      >

        <ai-card title="企业基本信息">
          <div class="ai-form" slot="content">
            <!-- 社会组织名称 -->
            <el-form-item label="社会组织名称" prop="name">
              <el-input
                  v-model="formData.name"
                  show-word-limit
                  :maxlength="30"
                  clearable
                  size="small"
              ></el-input>
            </el-form-item>

            <!-- 社会组织类型 -->
            <el-form-item label="社会组织类型" prop="socialType">
              <ai-select
                  v-model="formData.socialType"
                  placeholder="请选择"
                  :selectList="$dict.getDict('twoNewOrgSocialType')"
              ></ai-select>
            </el-form-item>

            <!-- 统一社会信用代码 -->
            <el-form-item label="统一社会信用代码" prop="unifiedCode">
              <el-input
                  v-model="formData.unifiedCode"
                  clearable
                  size="small"
              ></el-input>
            </el-form-item>

            <!-- 登记证号 -->
            <el-form-item label="登记证号" prop="certificateNumber">
              <el-input
                  v-model="formData.certificateNumber"
                  clearable
                  size="small"
              ></el-input>
            </el-form-item>

            <!-- 负责人姓名 -->
            <el-form-item label="负责人姓名" prop="administratorName">
              <el-input
                  v-model="formData.administratorName"
                  clearable
                  size="small"
              ></el-input>
            </el-form-item>

            <!-- 登记管理机构代码 -->
            <el-form-item label="登记管理机构代码" prop="registrationCode">
              <el-input
                  v-model="formData.registrationCode"
                  clearable
                  size="small"
              ></el-input>
            </el-form-item>

            <!-- 负责人联系方式 -->
            <el-form-item label="负责人联系方式" prop="administratorPhone">
              <el-input
                  v-model="formData.administratorPhone"
                  clearable
                  size="small"
              ></el-input>
            </el-form-item>

            <!-- 批准日期 -->
            <el-form-item label="批准日期" prop="approvalDate">
              <el-date-picker
                  value-format="yyyy-MM-dd"
                  v-model="formData.approvalDate"
                  type="date"
                  placeholder="选择日期"
                  size="small"
              >
              </el-date-picker>
            </el-form-item>

            <!-- 负责人身份证号码 -->
            <el-form-item label="负责人身份证号码" prop="administratorIdNumber">
              <el-input
                  v-model="formData.administratorIdNumber"
                  clearable
                  size="small"
              ></el-input>
            </el-form-item>

            <!-- 是否有外资背景isForeign -->
            <el-form-item label="是否有外资背景" prop="isForeign">
              <el-radio-group v-model="formData.isForeign">
                <el-radio
                    :label="item.label"
                    v-for="(item, i) in isForeign"
                    :key="i"
                >{{ item.name }}
                </el-radio
                >
              </el-radio-group>
            </el-form-item>

            <!-- 所属区域 -->
            <el-form-item label="所属区域" prop="areaId">
              <ai-area-select
                  always-show
                  clearable
                  :instance="instance"
                  v-model="formData.areaId"
                  :areaLevel="5"
              ></ai-area-select>
              <!-- @fullname="v => (formData.areaName = v)" -->
            </el-form-item>

            <!-- 详细地址 -->
            <el-form-item label="详细地址" prop="address" class="width">
              <el-input
                  v-model="formData.address"
                  clearable
                  size="small"
              ></el-input>
            </el-form-item>

            <!-- 网格归属 -->
            <el-form-item label="网格归属" prop="girdId" class="girdId">
              <el-cascader
                  v-model="formData.girdId"
                  :options="gridTree"
                  :props="gridTreeOps"
                  clearable
                  size="small"
              />
            </el-form-item>
          </div>
        </ai-card>
        <ai-card title="治保负责人信息">
          <div class="ai-form" slot="content">
            <!-- 治保负责人姓名 -->
            <el-form-item label="治保负责人姓名" prop="securityPersonName">
              <el-input
                  v-model="formData.securityPersonName"
                  clearable
                  size="small"
              ></el-input>
            </el-form-item>

            <!-- 治保负责人联系方式 -->
            <el-form-item label="治保负责人联系方式" prop="securityPersonPhone">
              <el-input
                  v-model.number="formData.securityPersonPhone"
                  clearable
                  size="small"
              ></el-input>
            </el-form-item>
          </div>
        </ai-card>
        <ai-card title="组织信息">
          <div class="ai-form" slot="content">

            <!--是否具备建立中共党组织条件  -->
            <el-form-item label="是否具备建立中共党组织条件" prop="isBuildParty">
              <el-radio-group v-model="formData.isBuildParty">
                <el-radio
                    :label="item.label"
                    v-for="(item, i) in isBuildParty"
                    :key="i"
                >{{ item.name }}
                </el-radio
                >
              </el-radio-group>
            </el-form-item>

            <!-- 关注程度 -->
            <el-form-item label="关注程度" prop="concernDegree">
              <ai-select
                  v-model="formData.concernDegree"
                  placeholder="请选择"
                  :selectList="$dict.getDict('twoNewOrgConcernDegree')"
              ></ai-select>
            </el-form-item>

            <!--是否有中共党组织  -->
            <el-form-item label="是否有中共党组织" prop="isHaveParty">
              <el-radio-group v-model="formData.isHaveParty">
                <el-radio
                    :label="item.label"
                    v-for="(item, i) in isHaveParty"
                    :key="i"
                >{{ item.name }}
                </el-radio
                >
              </el-radio-group>
            </el-form-item>

            <!-- 中共党员人数 -->
            <el-form-item label="中共党员人数" prop="partyNumber">
              <el-input
                  v-model.number="formData.partyNumber"
                  clearable
                  size="small"
              ></el-input>
            </el-form-item>

            <!--是否有公会  -->
            <el-form-item label="是否有公会" prop="isHaveUnion">
              <el-radio-group v-model="formData.isHaveUnion">
                <el-radio
                    :label="item.label"
                    v-for="(item, i) in isHaveUnion"
                    :key="i"
                >{{ item.name }}
                </el-radio
                >
              </el-radio-group>
            </el-form-item>

            <!-- 公会会员人数-->
            <el-form-item label="公会会员人数" prop="unionNumber">
              <el-input
                  v-model.number="formData.unionNumber"
                  clearable
                  size="small"
              ></el-input>
            </el-form-item>

            <!--是否有共青团组织  -->
            <el-form-item label="是否有共青团组织" prop="isHaveYoung">
              <el-radio-group v-model="formData.isHaveYoung">
                <el-radio
                    :label="item.label"
                    v-for="(item, i) in isHaveYoung"
                    :key="i"
                >{{ item.name }}
                </el-radio
                >
              </el-radio-group>
            </el-form-item>

            <!--共青团组织人数-->
            <el-form-item label="共青团组织人数" prop="youngNumber">
              <el-input
                  v-model.number="formData.youngNumber"
                  clearable
                  size="small"
              ></el-input>
            </el-form-item>

            <!--是否有妇联组织  -->
            <el-form-item label="是否有妇联组织" prop="isHaveWoman">
              <el-radio-group v-model="formData.isHaveWoman">
                <el-radio
                    :label="item.label"
                    v-for="(item, i) in isHaveWoman"
                    :key="i"
                >{{ item.name }}
                </el-radio
                >
              </el-radio-group>
            </el-form-item>

            <!--妇女人数-->
            <el-form-item label="妇女人数" prop="womanNumber">
              <el-input
                  v-model.number="formData.womanNumber"
                  size="small"
                  clearable
              ></el-input>
            </el-form-item>

          </div>
        </ai-card>
      </el-form>
    </template>

    <!-- 底部按钮 -->
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm('ruleForm')">提交</el-button>
    </template>
  </ai-detail>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "Add",
  // 组件
  components: {},
  props: {instance: Function, dict: Object, params: Object},
  data() {
    return {
      gridTree: [],
      id: "",
      formData: {
        name: "",
        socialType: "",
        unifiedCode: "",
        certificateNumber: "",
        administratorName: "",
        registrationCode: "",
        administratorPhone: "",
        approvalDate: "",
        administratorIdNumber: "",
        isForeign: "",
        areaId: "",

        address: "",
        girdId: "",
        securityPersonName: "",
        securityPersonPhone: "",
        isBuildParty: "",
        concernDegree: "",
        isHaveParty: "",
        partyNumber: "",
        isHaveUnion: "",
        unionNumber: "",
        isHaveYoung: "",

        youngNumber: "",
        isHaveWoman: "",
        womanNumber: "",

        bizType: "1"
      }
    };
  },
  // 计算
  computed: {
    ...mapState(["user"]),

    formRules() {
      // 身份证号校验
      const IdCard = (rule, value, callback) => {
        const reg = /(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|12]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/;
        if (!value) {
          return callback(new Error("证件号码不能为空"));
        } else if (!reg.test(value)) {
          return callback(new Error("证件号码格式错误"));
        } else {
          callback();
        }
      };

      // 统一社会信用代码校验
      const unifiedCode = (rule, value, callback) => {
        const reg = /[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}/;
        if (value && !reg.test(value)) callback("统一社会信用代码格式错误");
        else callback();
      };

      return {
        name: [
          {required: true, message: "请输入企业名称", trigger: "change"}
        ],
        socialType: [
          {required: true, message: "请选择社会组织类型", trigger: "change"}
        ],
        unifiedCode: [
          {
            required: true,
            message: "请输入统一社会信用代码",
            trigger: "change"
          },
          {validator: unifiedCode}
        ],

        administratorName: [
          {
            required: true,
            message: "请输入负责人姓名",
            trigger: "change"
          }
        ],
        administratorPhone: [
          {
            required: true,
            message: "请输入负责人联系方式",
            trigger: "change"
          }
          // { validator: phonePass }
        ],
        areaId: [
          {
            required: true,
            message: "请选择所属区域",
            trigger: "change"
          },
          {
            validator: (r, v, cb) =>
                /0{3}$/g.test(v) ? cb("请选择到村") : cb()
          }
        ],

        administratorIdNumber: [
          {
            required: true,
            message: "请输入负责人身份证号码",
            trigger: "change"
          },
          {validator: IdCard}
        ],

        isForeign: [
          {
            required: true,
            message: "请选择是否有外资背景",
            trigger: "change"
          }
        ],
        isBuildParty: [
          {
            required: true,
            message: "请选择是否具备建立中共党组织条件",
            trigger: "change"
          }
        ],
        girdId: [
          {required: true, message: "请选择网格归属", trigger: "change"}
        ],

        // securityPersonPhone: [{ validator: phonePass }],

        concernDegree: [
          {required: true, message: "请选择关注程度", trigger: "change"}
        ],
        isHaveParty: [
          {
            required: true,
            message: "请选择是否有中共党组织",
            trigger: "change"
          }
        ],
        partyNumber: [
          {required: true, message: "请输入中共党员人数", trigger: "change"},
          {
            validator: (r, v, cb) =>
                !v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb("请输入正整数")
          }
        ],
        isHaveUnion: [
          {required: true, message: "请选择是否有公会", trigger: "change"}
        ],
        unionNumber: [
          {required: true, message: "请输入公会会员人数", trigger: "change"},
          {
            validator: (r, v, cb) =>
                !v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb("请输入正整数")
          }
        ],
        isHaveYoung: [
          {
            required: true,
            message: "请选择是否有共青团组织",
            trigger: "change"
          }
        ],
        youngNumber: [
          {
            required: true,
            message: "请输入共青团组织人数",
            trigger: "change"
          },
          {
            validator: (r, v, cb) =>
                !v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb("请输入正整数")
          }
        ],
        isHaveWoman: [
          {required: true, message: "请选择是否有妇联组织", trigger: "change"}
        ],
        womanNumber: [
          {required: true, message: "请输入妇女人数", trigger: "change"},
          {
            validator: (r, v, cb) =>
                !v || /^[1-9]\d*|0$/g.test(v) ? cb() : cb("请输入正整数")
          }
        ]
      };
    },

    isForeign() {
      return [
        {name: "是", label: "1"},
        {name: "否", label: "0"}
      ];
    },
    isBuildParty() {
      return [
        {name: "是", label: "1"},
        {name: "否", label: "0"}
      ];
    },
    isHaveParty() {
      return [
        {name: "是", label: "1"},
        {name: "否", label: "0"}
      ];
    },
    isHaveUnion() {
      return [
        {name: "是", label: "1"},
        {name: "否", label: "0"}
      ];
    },
    isHaveYoung() {
      return [
        {name: "是", label: "1"},
        {name: "否", label: "0"}
      ];
    },
    isHaveWoman() {
      return [
        {name: "是", label: "1"},
        {name: "否", label: "0"}
      ];
    },
    gridTreeOps() {
      return {
        emitPath: false,
        value: "id",
        label: "girdName",
        children: "girdList"
      };
    }
  },
  // 监听
  watch: {},
  // 实例创建后
  created() {
    this.dict
    .load(
        "twoNewOrgCompanyCategory",
        "twoNewOrgDangerousType",
        "twoNewOrgConcernDegree"
    )
    .then(() => {
    });

    this.getGridTree();
    this.formData.areaId = this.user.info.areaId;

    if (this.params && this.params.id) {
      this.id = this.params.id;
      this.getInfoList(this.params.id);
    }
  },
  onShow() {
  },
  // 实例渲染后
  mounted() {
  },
  // 方法
  methods: {
    getInfoList(id) {
      this.instance
      .post(`/app/apptwoneworganization/queryDetailById?id=${id}`)
      .then(res => {
        if (res.code === 0) {
          this.formData = res.data;
        }
      });
    },

    // 确定新增
    confirm() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          this.instance
          .post(`/app/apptwoneworganization/addOrUpdate`, {
            ...this.formData
          })
          .then(res => {
            if (res.code == 0) {
              this.$message.success("提交成功");
              this.cancel(true);
            }
          });
        }
      });
    },

    // 返回按钮
    cancel(isRefresh) {
      this.$emit("change", {
        type: "list",
        isRefresh: !!isRefresh
      });
    },

    getGridTree() {
      this.instance.post("/app/appgirdinfo/listAllByTop").then(res => {
        if (res.data) {
          this.gridTree = res.data;
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep.ai-form {
  .ai-card {
    .ai-card-body {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .isforeign {
        margin-right: 109px;
      }

      .width {
        width: 100%;
      }

      .girdId {
        width: 100%;

        .el-form-item__content {
          .el-cascader {
            width: 100%;
          }
        }
      }
    }
  }
}
::v-deep .ai-form .el-form-item .el-form-item__content {
  margin-left: 164px!important;
}
</style>
