<template>
  <section class="AppCorporateSeal">
      <ai-list v-if="showList">
        <template slot="title">
          <ai-title title="企业印章" :isShowBottomBorder="true"></ai-title>
        </template>
        <template slot="content">
          <div class="signaturePane">
            <div class="signatureCard" v-for="(op,i) in signatures" :key="i">
              <div class="default" v-if="op.isDefault==1">默认</div>
              <div class="body">
                <el-image :src="`data:image/png;base64,${op.signSealData}`"/>
              </div>
              <div class="footer">
                <el-button type="text" :disabled="op.isDefault==1" @click.stop="handleSetDefault(op.id)">设为默认</el-button>
                <hr/>
                <el-button type="text" :disabled="op.isDefault==1||op.signType==1" @click.stop="handleDelete(op.id)">删除
                </el-button>
              </div>
            </div>
            <div class="signatureCard add" @click="showList=false">
              <ai-icon icon="iconAdd" size="32px"/>
              <span>点击添加印章</span>
            </div>
          </div>
        </template>
      </ai-list>
    <seal-detail v-else/>
  </section>
</template>

<script>
  import SealDetail from "./sealDetail";

  export default {
    name: "AppCorporateSeal",
    label: "企业印章",
    components: {SealDetail},
    provide() {
      return {
        seal: this
      }
    },
    props: {
      instance: Function,
      dict: Object,
      permissions: Function
    },
    data() {
      return {
        signatures: [],
        showList: true
      }
    },
    created() {
      this.getSignatures()
    },
    methods: {
      getSignatures() {
        this.instance.post("/app/syssignaccount/list", null, {
          params: {
            signType: 2,
            size: 999
          }
        }).then(res => {
          if (res?.data) {
            this.signatures = res.data.records
          }
        })
      },
      handleSetDefault(id) {
        this.$confirm("是否设置该印章为默认印章?").then(() => {
          this.instance.post("/app/syssignaccount/default", null, {params: {id, listType: 1}}).then(res => {
            if (res?.code == 0) {
              this.$message.success("设置成功!")
              this.getSignatures()
            }
          }).catch(() => 0)
        })
      },
      handleDelete(ids) {
        this.$confirm("是否删除该印章?").then(() => {
          this.instance.post("/app/syssignaccount/delete", null, {params: {ids}}).then(res => {
            if (res?.code == 0) {
              this.$message.success("删除成功!")
              this.getSignatures()
            }
          }).catch(() => 0)
        })
      },
    }
  }
</script>

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

    ::v-deep .signaturePane {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      padding: 16px;

      .signatureCard {
        width: 290px;
        height: 258px;
        background: #FFFFFF;
        border-radius: 4px;
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        &.add {
          justify-content: center;
          align-items: center;
          color: #666666;
          cursor: pointer;

          .AiIcon {
            width: 32px;
            height: 32px;
            font-size: 32px;
          }

          & > span {
            font-size: 12px;
            line-height: 16px;
          }
        }

        .default {
          position: absolute;
          width: 56px;
          height: 24px;
          background: #3573FF;
          border-radius: 0 0 4px 0;
          top: 0;
          left: 0;
          text-align: center;
          line-height: 24px;
          font-size: 12px;
          color: #FFF;
        }

        .body {
          min-height: 0;
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 50px;
          cursor: pointer;

        }

        .footer {
          flex-shrink: 0;
          height: 40px;
          background: rgba(#30426F, .5);
          display: flex;
          align-items: center;
          padding: 8px 0;
          box-sizing: border-box;

          hr {
            height: 100%;
            border-color: rgba(#fff, .5);
          }

          & > .el-button {
            flex: 1;
            color: #fff;

            &[disabled] {
              color: rgba(#fff, .5);
            }
          }
        }
      }
    }
  }

</style>
