<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2024-01-18 14:55:20
-->
<template>
  <div>
    <div>
      <el-form-item label="共有方式：">
        <el-radio-group :disabled="!viewEdit" v-model="ruleForm.sldy.gyfs">
          <el-radio label="0">单独所有</el-radio>
          <el-radio label="1">共同共有</el-radio>
          <el-radio label="2">按份所有</el-radio>
          <el-radio label="3">其它共有</el-radio>
        </el-radio-group>
      </el-form-item>
    </div>
    <lb-table
      :column="column"      :pagination="false"
      :key="key"
      :heightNumSetting="true"
      :minHeight="0"
      :rowStyleHeight="25"
      :data="tableDataList"
    >
    </lb-table>
    <addQlr
      v-model="dialog"
      :details="details"
      :showButton="disabled"
      @updateDetail="handleupdateDetail"
    />
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { getIdCardInfo } from "@/utils/operation.js";
import addQlr from "./addSqr.vue";
export default {
  components: {
    addQlr,
  },
  computed: {
    ...mapGetters(["dictData"]),
  },
  props: {
    tableData: {
      type: Array,
      default: function () {
        return [];
      },
    },
    gyfs: {
      type: String,
      default: "1",
    },
    disabled: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      key: 0,
      dataIndex: 0,
      dialog: false,
      isaddupdate: false,
      details: {},
      tableDataList: [],
      InformationTable: [
        {
          width: "50",
          renderHeader: (h, scope) => {
            return (
              <div>
                {" "}
                {!this.disabled ? (
                  "序号"
                ) : (
                  <i
                    class="el-icon-plus pointer"
                    onClick={() => {
                      this.addClick();
                    }}
                  ></i>
                )}
              </div>
            );
          },
          render: (h, scope) => {
            return (
              <div>
                {!this.disabled ? (
                  <span>{scope.$index + 1}</span>
                ) : (
                  <i
                    class="el-icon-minus pointer"
                    onClick={() => {
                      this.deleClick(scope.$index, scope.row);
                    }}
                  ></i>
                )}
              </div>
            );
          },
        },
        {
          label: "身份证读卡器",
          align: "center",
          render: (h, scope) => {
            return (
              <el-button
                type="text"
                icon="el-icon-tickets"
                disabled={!this.disabled}
                onClick={() => {
                  this.readClick(scope.row);
                }}
              >
                读取
              </el-button>
            );
          },
        },
        {
          prop: "sqrmc",
          label: "姓名/名称",
        },
        {
          prop: "zjzl",
          label: "证件种类",
          render: (h, scope) => {
            return (
              this.dictData["A30"] &&
              this.dictData["A30"].map((option) => {
                if (option.dcode == scope.row.zjzl) {
                  return <span>{option.dname}</span>;
                }
              })
            );
          },
        },
        {
          prop: "zjh",
          label: "证件号",
        },
        {
          prop: "dh",
          label: "联系电话",
        },
        {
          label: "操作",
          render: (h, scope) => {
            return (
              <div>
                {this.disabled ? (
                  <el-button
                    icon="el-icon-edit-outline"
                    type="text"
                    onClick={() => {
                      this.editClick(scope.$index, scope.row);
                    }}
                  >
                    编辑
                  </el-button>
                ) : (
                  <el-button
                    icon="el-icon-view"
                    type="text"
                    onClick={() => {
                      this.queryViewClick(scope.$index, scope.row);
                    }}
                  >
                    {" "}
                    查看
                  </el-button>
                )}
              </div>
            );
          },
        },
      ],
      column: [],
    };
  },
  watch: {
    tableData: {
      handler: function (val, oldVal) {
        let that = this;
        this.$nextTick(() => {
          if (val.length == 0 || !val) {
          } else {
            that.tableDataList = _.cloneDeep(val);
            that.key++;
          }
        });
      },
      immediate: true,
      deep: true,
    },
    gyfs: {
      handler(newVal, oldValue) {
        let dataList = _.cloneDeep(this.InformationTable);
        if (newVal == 0) {
          this.column = _.cloneDeep(dataList);
          this.tableDataList = _.cloneDeep(this.tableData);
          this.key++;
        } else if (newVal == "1" || newVal == "3") {
          this.column = dataList;
        } else {
          this.column = _.cloneDeep(dataList);
          this.column.splice(2, 0, {
            prop: "qlbl",
            label: "份数",
          });
        }
      },
      immediate: true,
    },
  },
  methods: {
    /**
     * @description: handleupdateDetail
     * @param {*} value
     * @author: renchao
     */
    handleupdateDetail(value) {
      let that = this;
      let arr = this.tableData.map((item) => item.zjh);
      // if (this.isaddupdate) {
      //   if (!arr.includes(value.zjh)) {
      //     this.tableDataList[this.tableDataList.length] = _.cloneDeep(value);
      //     this.$emit('upDateQlrxxList', this.tableDataList)
      //   } else {
      //     setTimeout(() => {
      //       that.$message.error('证件号不能重复')
      //     }, 1500)
      //   }
      // } else {
      //   if (!arr.includes(value.zjh) || this.tableData[this.dataIndex].zjh == value.zjh) {
      //     this.tableDataList[this.dataIndex] = _.cloneDeep(value);
      //     this.$emit('upDateQlrxxList', this.tableDataList)
      //   } else {
      //     setTimeout(() => {
      //       that.$message.error('证件号不能重复')
      //     }, 1500)
      //   }
      // }

      if (this.isaddupdate) {
        if (!_.isEqual(value, this.tableData)) {
          this.tableDataList[this.tableDataList.length] = _.cloneDeep(value);
          this.$emit("upDateQlrxxList", this.tableDataList);
        }
      } else {
        if (!_.isEqual(value, this.tableData)) {
          this.tableDataList[this.dataIndex] = _.cloneDeep(value);
          this.$emit("upDateQlrxxList", this.tableDataList);
        }
      }
      this.key++;
    },
    /**
     * @description: 新增
     * @author: renchao
     */
    addClick() {
      if (this.gyfs == "0" && this.tableDataList.length > 0) {
        this.$message.warning("当前共有方式为单独所有，无法添加多个权利人");
      } else {
        this.key++;
        this.details = {
          sqrmc: "",
          zjzl: "1",
          zjh: "",
          xb: "",
          txdz: "",
          fzjg: "",
        };
        this.dialog = true;
        this.isaddupdate = true;
      }
    },

    /**
     * @description: 删除
     * @param {*} index
     * @param {*} row
     * @author: renchao
     */
    deleClick(index, row) {
      this.tableDataList.splice(index, 1);
      this.$emit("upDateQlrxxList", this.tableDataList);
      this.key++;
    },
    /**
     * @description: 身份证读取
     * @param {*} row
     * @author: renchao
     */
    readClick(row) {
      function getObjectByValue(arrayOfObjects, value) {
        var name = "";
        arrayOfObjects.forEach((item) => {
          if (item.dname.includes(value)) name = item.dcode;
        });
        return name;
      }
      getIdCardInfo(this.BASE_API.gaopaiyi).then((res) => {
        if (this.BASE_API.gaopaiyi == "jy") {
          const { Name, IdNo, Sex, Address, Agencvy, PhotoB64 } =
            JSON.parse(res);
          if (Name != "") {
            row.sqrmc = Name;
            row.zjzl = "1";
            row.zjh = IdNo;
            row.xb = getObjectByValue(this.dictData["A43"], Sex);
            row.txdz = Address;
            row.fzjg = Agencvy;
            row.avatar = "data:image/png;base64," + PhotoB64;
            this.$message({
              message: "读取成功！",
              type: "success",
            });
          } else {
            this.$message({
              message: "请放置身份证",
              type: "warning",
            });
          }
        } else {
          if (res.data.code == 0) {
            let data = res.data.IDCardInfo;
            const {
              name,
              cardID: zjh,
              sexCode: xb,
              address: txdz,
              issueOrgan: fzjg,
              photoBase64,
            } = data;
            row.sqrmc = name;
            row.zjzl = "1";
            row.zjh = zjh;
            row.xb = xb;
            row.txdz = txdz;
            row.fzjg = fzjg;
            row.avatar = "data:image/png;base64," + photoBase64;
            this.$message({
              message: "读取成功！",
              type: "success",
            });
          } else {
            this.$message({
              message: res.data.message,
              type: "warning",
            });
          }
        }
        this.$emit("upDateQlrxxList", this.tableDataList);
      });
    },
    /**
     * @description: 修改
     * @param {*} index
     * @param {*} row
     * @author: renchao
     */
    editClick(index, row) {
      this.details = row;
      this.details.gyfs = this.gyfs;
      this.dataIndex = index;
      this.dialog = true;

      this.isaddupdate = false;
    },
    /**
     * @description: queryViewClick
     * @param {*} index
     * @param {*} row
     * @author: renchao
     */
    queryViewClick(index, row) {
      this.details = row;
      this.dialog = true;
    },
  },
};
</script>
<style scoped lang="scss">
/deep/.el-table--small .el-table__cell {
  padding: 0 0 !important;
}
/deep/.el-table th {
  height: 30px !important;
}
/deep/.el-table .cell {
  padding-right: 12px;
}
</style>