<template>
  <section class="pumDetail">
    <ai-detail>
      <ai-title slot="title" title="经营主体详情" isShowBottomBorder isShowBack @onBackClick="$router.push({query:{}})"/>
      <template #content>
        <ai-sidebar :tabTitle="menuList" v-model="index" @change="change"></ai-sidebar>
        <template v-if="index==0">
          <el-form size="small" label-width="160px">
          <ai-card title="营业执照">
            <template #content>
              <el-form-item label="企业名称">{{ detail.enterpriseName }}</el-form-item>
              <el-form-item label="统一社会信用代码">{{ detail.unifiedCode }}</el-form-item>
              <el-form-item label="企业类型">{{ dict.getLabel('enterpriseType', detail.enterpriseType) }}</el-form-item>
              <el-form-item label="所在地区">{{ detail.areaName }}</el-form-item>
              <el-form-item label="详细地址">{{ detail.address }}</el-form-item>
              <el-form-item label="经营范围">{{ detail.businessScope }}</el-form-item>
              <el-form-item label="营业期限">{{ detail.operationPeriod }}</el-form-item>
              <el-form-item label="营业执照">
                <el-image class="thumb" :src="detail.businessLicense" :preview-src-list="[detail.businessLicense]"/>
              </el-form-item>
            </template>
          </ai-card>
          <ai-card title="法人信息">
            <template #content>
              <el-form-item label="法人姓名">{{ detail.legalPersonName }}</el-form-item>
              <el-form-item label="身份证号">{{ detail.idNumber }}</el-form-item>
              <el-form-item label="联系方式">{{ detail.phone }}</el-form-item>
              <el-form-item label="身份证照片">
                <el-row type="flex" align="middle">
                  <el-image class="thumb" :src="detail.idNumberTopside" :preview-src-list="[detail.idNumberTopside]"/>
                  <el-image class="thumb" :src="detail.idNumberBackside" :preview-src-list="[detail.idNumberBackside]"/>
                </el-row>
              </el-form-item>
            </template>
          </ai-card>
          <ai-card title="审核结果" v-if="!isAuthing">
            <template #content>
              <el-form-item label="审核人">{{ detail.auditUserName }}</el-form-item>
              <el-form-item label="联系方式">{{ detail.auditPhone }}</el-form-item>
              <el-form-item label="备注说明">{{ detail.auditDescription }}</el-form-item>
            </template>
          </ai-card>
          </el-form>
        </template>
        <template v-if="index==1">
          <ai-card title="股权结构">
            <template #right>
              <el-button type="text" size="small" @click="handleAdd">+添加股东</el-button>
            </template>
            <template #content>
              <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
                        @getList="getTableData" :col-configs="colConfigs">
              </ai-table>
            </template>
          </ai-card>
        </template>
      </template>
    </ai-detail>
    <ai-dialog title="股权结构" :visible.sync="dialog" width="600px"  @onConfirm="confirm">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="股东名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入股东名称"></el-input>
        </el-form-item>
        <el-form-item label="股东类型" prop="resource">
          <el-radio-group v-model="form.resource">
            <el-radio label="个人"></el-radio>
            <el-radio label="企业"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证号" prop="idNumber">
          <el-input v-model="form.idNumber" placeholder="请输入身份证号"></el-input>
        </el-form-item>
        <el-form-item label="持股数量" prop="num">
          <el-input v-model="form.num" placeholder="请输入持股数量"></el-input>
        </el-form-item>
        <el-form-item label="持股占比%" prop="percentage">
          <el-input v-model="form.percentage" placeholder="请输入持股占比"></el-input>
        </el-form-item>
      </el-form>
    </ai-dialog>
  </section>
</template>

<script>
export default {
  name: "pumDetail",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    isAuthing() {
      return this.detail.status == "0"
    },
    colConfigs() {
      return [
        {prop: "", label: "股东名称", width: 150},
        {prop: "", label: "股东类型", width: 150},
        {prop: "idNumber", label: "身份证/信用代码", width: 240},
        {prop: "", label: "持股数量", width: 150},
        {prop: "", label: "持股占比", width: 150},
        {prop: "", label: "股权证", width: 200},
      ]
    },
    rules() {
      return {
        name: [{required: true, message: "请填写姓名",trigger: 'blur'}],
        resource: [{ required: true, message: '请选择股东类型', trigger: 'change' }],
        idNumber: [{ required: true, message: '请输入身份证号',trigger: 'blur'}],
        num: [{ required: true, message: '请输入持股数量',trigger: 'blur'}],
        percentage: [{ required: true, message: '请输入持股占比',trigger: 'blur'}]
      }
    }
  },
  data() {
    return {
      detail: {},
      menuList: ['基本信息'],
      // menuList: ['基本信息','股权结构'],
      index: 0,
      tableData: [],
      page: {current: 1, size: 10, total: 0},
      dialog: false,
      form: {
        name: "",
        resource: "",
        idNumber: "",
        num: '',
        percentage: '',
      },
    }
  },
  methods: {
    getDetail() {
      let {id} = this.$route.query
      this.instance.post("/app/appportaluserenterprise/queryDetailById", null, {
        params: {id}
      }).then(res => {
        if (res?.data) {
          this.detail = res.data
        }
      })
    },
    change(index) {
      this.currentMenu = index
      this.getDetail()
    },
    getTableData() {
      // this.instance.post("/app/appdvcpconfig/list", null, {
      //   params: {...this.page, ...this.search}
      // }).then(res => {
      //   if (res?.data) {
      //     this.tableData = res.data?.records
      //     this.page.total = res.data.total
      //   }
      // })
    },
    handleAdd() {
      this.dialog = true
    },
    confirm() {
      // this.$refs["form"].validate(valid => {
      //   if (valid) {
      //     this.instance.post("/app/appdvcpconfig/addOrUpdate", {
      //       ...this.dialogForm,
      //     }).then(res => {
      //       if (res.code == 0) {
      //         this.$message.success(this.dialogForm.id ? "修改成功" : "新增成功");
      //         this.dialog = false;
      //         this.getTableData();
      //       }
      //     })
      //   }
      // })
    },
  },
  created() {
    this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
.pumDetail {
  height: 100%;

  .thumb {
    width: 120px;
    height: 120px;

    & + .thumb {
      margin-left: 8px;
    }
  }
}
</style>
