<template>
  <section class="Add">
    <ai-detail v-if="!id || isEdit==true">

      <template #title>
        <ai-title :title="params.id ? '编辑集体经济股权登记' : '新增集体经济股权登记'" :isShowBack="true" :isShowBottomBorder="true" @onBackClick="cancel(false)"></ai-title>
      </template>
      <template #content>

        <ai-card title="基本信息">
          <template #right v-if="params.id">
            <span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="isEdit==true" @click="getDetail(params.id),isEdit=false">取消</span>
            <span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="isEdit==true" @click="confirm()">保存</span>
          </template>
          <template #content>
            <el-form ref="form" :model="form" :rules="rules" size="small"  label-width="150px">
              <el-row type="flex">
                <el-col :span="20">
                  <el-form-item label="集体经济组织" prop="organizationName">
                    <el-input v-model="form.organizationName" placeholder="请输入集体经济组织名称"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="20">
                  <el-form-item label="统一社会信用代码" prop="unifiedCode">
                    <el-input v-model="form.unifiedCode" placeholder="请输入统一社会信用代码" maxlength="18"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row type="flex">
                <el-col :span="12">
                  <el-form-item label="所在地区" prop="areaId">
                    <ai-area-get :instance="instance"  :fullname.sync="form.areaName" v-model="form.areaId" :root="user.info.areaId" ></ai-area-get>
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-row type="flex">
                <el-col :span="12">
                  <el-form-item label="股权证编号" prop="stockCertificateCode">
                    <el-input v-model="form.stockCertificateCode" placeholder="请输入股权证编号"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="权证照片" prop="fileList">
                <ai-uploader v-model="form.fileList" :instance="instance" :limit="9" isShowTip/>
              </el-form-item>
            </el-form>
          </template>
        </ai-card>

        <ai-card title="家庭持股情况">
          <template #right>
            <span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;"  v-if="!id || isEdit==true" @click="sysInfoDialog = true">+添加股权人</span>
          </template>
          <template #content>
            <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
                      @getList="getDetail" :col-configs="colConfigs" :dict="dict">
              
              <el-table-column slot="options" label="操作"  align="center" v-if="!id || isEdit==true">
                <template slot-scope="{row,$index}">
                  <el-button type="text" @click="editBtn(row,$index)">编辑</el-button>
                  <el-button type="text" @click="deleteBtn(row,$index)">删除</el-button>
                </template>
              </el-table-column>
            </ai-table>
          </template>
        </ai-card>

      </template>
      <template slot="footer" class="footer">
        <el-button class="delete-btn footer-btn" @click="cancel(false)">取消</el-button>
        <el-button class="footer-btn" type="primary" @click="confirm()">保存</el-button>
      </template>
    </ai-detail>

    <ai-detail class="add" v-if="params.id && !isEdit">
      <template slot="title">
        <ai-title title="集体经济股权登记详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
      </template>
      <template slot="content">

        <ai-card title="基本信息">
          <template #right>
              <span style="color:#2266FF;cursor: pointer;font-size: 12px;" class="iconfont iconEdit" v-if="isEdit==false" @click="edit">修改</span>
            </template>
          <template #content>
            <ai-wrapper>
              <ai-info-item label="集体经济组织" :value="data.organizationName"></ai-info-item>
              <ai-info-item label="统一社会信用代码" :value="data.unifiedCode"></ai-info-item>
              <ai-info-item label="所在地区" :value="data.areaName"></ai-info-item>
              <ai-info-item label="股权证编号" :value="data.stockCertificateCode"></ai-info-item>
              <ai-info-item label="股权总数" :value="data.totalEquity"></ai-info-item>
              <ai-info-item label="股金总额(元)" :value="data.totalAmount"></ai-info-item>
              <ai-info-item label="权证照片" isLine>
                <ai-uploader v-model="data.fileList" :instance="instance" :limit="9" disabled/>
              </ai-info-item>
            </ai-wrapper>
          </template>
        </ai-card>

        <ai-card title="家庭持股情况">
          <template #right>
            <span style="color:#2266FF;margin-left: 16px;cursor: pointer;font-size: 12px;" v-if="!id || isEdit==true" @click="sysInfoDialog = true">+添加股权人</span>
          </template>
          <template #content>
            <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
                      @getList="getDetail" :col-configs="colConfigs" :dict="dict">

              <el-table-column slot="options" label="操作"  align="center" v-if="!id || isEdit==true">
                <template slot-scope="{row,$index}">
                  <el-button type="text" @click="editBtn(row, $index)">编辑</el-button>
                  <el-button type="text" @click="deleteBtn(row, $index)">删除</el-button>
                </template>
              </el-table-column>
            </ai-table>
            
          </template>
        </ai-card>
      </template>
    </ai-detail>

    <!-- 弹框 -->
    <ai-dialog title="股权结构" :visible.sync="sysInfoDialog" width="600px" @onConfirm="onConfirm"
               @closed="table={},isEditSys=false">
      <el-form size="small" label-width="140px" :rules="dialogRules" ref="dialogForm" :model="table">
        <el-form-item label="股权人姓名" prop="name">
          <el-input v-model="table.name" placeholder="请输入股权人姓名" clearable/>
        </el-form-item>
        <el-form-item label="身份证号" prop="idNumber">
          <el-input v-model="table.idNumber" placeholder="请输入身份证号" clearable maxlength="18"/>
        </el-form-item>
        <el-form-item label="与户主关系" prop="householdRelation">
          <ai-select v-model="table.householdRelation" placeholder="请选择" :selectList="$dict.getDict('householdRelation')" />
        </el-form-item>
        <el-form-item label="持股数量" prop="shareholdingNumber">
          <el-input v-model="table.shareholdingNumber" placeholder="请输入持股数量" clearable/>
        </el-form-item>
        <el-form-item label="持股金额(元)" prop="shareholdingAmount">
          <el-input v-model="table.shareholdingAmount" placeholder="请输入持股金额" clearable/>
        </el-form-item>
      </el-form>
    </ai-dialog>
  </section>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: "Add",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    params: Object,
  },
  data() {
    return { 
      id: '',
      form: {
        organizationName: '',
        areaId: '',
        areaName: '',
        unifiedCode: '',
        stockCertificateCode: '',
        fileList: [],
      },
      table: {},
      isEdit: false,
      radioFrom: '',
      page: {current: 1, size: 10, total: 0},
      tableData: [],
      page: {current: 1, size: 10, total: 0},
      sysInfoDialog: false,
      data: {
        areaId: '',
        aareaName: '',
      },
      isEditSys: false,
      sysIndex: ''
    }
  }, 
  computed: {
    rules() {
      return {
        organizationName: [{required: true, message: '请输入集体经济组织名称', trigger: 'blur'}],
        unifiedCode: [{required: true, message: '请输入18位统一社会信用代码', trigger: 'blur'},
                      {min: 18, message: '请输入18位统一社会信用代码', trigger: 'blur'}],
        areaId: [
          {required: true, message: '请选择所在地区', trigger: 'blur'},
          {pattern: /[^0]0{0,2}$/,message:'所在地区必须选择到村'}
        ],
        stockCertificateCode: [{required: true, message: '请输入股权证编号', trigger: 'blur'}],
        fileList: [{required: true, message: '请上传图片', trigger: 'blur'}],
      }
    },
    dialogRules() {
      return {
        name: [{required: true, message: '请输入股权人姓名', trigger: 'blur'}],
        idNumber: [{required: true, message: '请输入18位身份证号', trigger: 'blur'},
        {min: 18, message: '请输入18位身份证号', trigger: 'blur'}],
        householdRelation: [{required: true, message: '请选择与户主关系', trigger: 'blur'}],
        shareholdingNumber: [{required: true, message: '请输入持股数量', trigger: 'blur'}],
      }
    },
    ...mapState(['user']),
    colConfigs() {
      return [
        { prop: "name", label: '股权人姓名', align: "center", width: "150px", },
        { prop: "householdRelation", label: '与户主关系', align: "center", width: "200px", dict: 'householdRelation'},
        { prop: "idNumber", label: '身份证', align: "center", width: "200px", },
        { prop: "shareholdingNumber", label: '持股数量', align: "center", width: "200px", },
        { prop: "shareholdingAmount", label: '金额', align: "center", width: "200px", },
        { slot: "options" ,},
      ]
    }
  },
  created() {
    this.$dict.load('householdRelation')
    if (this.params && this.params.id) {
      this.id = this.params.id
      this.getDetail(this.params.id)
    }
  },
  methods: {
    cancel(isRefresh) {
      this.$emit('change', {
        type: 'List',
        isRefresh: !!isRefresh,
      })
    },
    edit() {
      this.isEdit=true
      this.form = JSON.parse(JSON.stringify(this.data))
    },
    deleteBtn(row, index) {
      if(row.householdRelation == 11) {
        return this.$message.error('不可以删除户主')
      }
      this.tableData.splice(index, 1)
    },
    getDetail(id) {
      this.instance.post(`/appcollectiveeconomyequity/queryDetailById`,null, {
        params: {
          id: id,
          ...this.page,
        }
      }).then(res => {
        if (res.code === 0) {
          this.data = res.data,
          this.tableData = res.data.shareholderList
          this.page.total = res.data.shareholderList.length
        }
      })
    },
    onConfirm() {
      this.$refs.dialogForm.validate((valid) => {
        if(valid) {
          if(this.isEditSys) {  //编辑
            // this.tableData[this.sysIndex] = this.table
            this.tableData.splice(this.sysIndex, 1, this.table)
          }else{//新增
            this.tableData.push(this.table)
          }
         
          this.sysInfoDialog = false
          this.$forceUpdate()
        }
      })
    },
    confirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.instance.post(`/appcollectiveeconomyequity/addOrUpdate`, {
            ...this.form,
            id: this.params.id || '',
            shareholderList: this.tableData,
          }).then(res => {
            if (res.code == 0) {
              this.$message.success('提交成功')
              setTimeout(() => {
                this.cancel(true)
              }, 600)
            }
          })
        }
      })
    },
    editBtn(row, index) {
      console.log(index)
      this.table = JSON.parse(JSON.stringify(row))
      this.sysInfoDialog = true
      this.isEditSys = true
      this.sysIndex = index 
    }
  },
}
</script>

<style lang="scss" scoped>
.Add {
  height: 100%;
  background: #f3f4f5;

  ::v-deep .ai-detail .ai-detail__footer {
    background: #FFF;
  }
}
</style>