<script setup name="sealConfiguration">
import { reactive, ref, getCurrentInstance, onMounted, h } from 'vue'
import { sealDel, sealList } from '@/http/apis/unitSet/sealConfiguration'
import sealCodeDialog from './sealCodeDialog.vue'
import { storeToRefs } from 'pinia'
import store from '@/store'
const userInfo = storeToRefs(store.userStore).userInfo || {}
const { proxy } = getCurrentInstance(),
  tableListRef = ref(),
  column = reactive([
    {
      label: '序号',
      type: 'index',
      width: '80'
    },
    {
      label: '印章名称',
      key: 'sealName',
      prop: 'sealName'
    },
    {
      label: '印章图片',
      slot: 'img'
    },
    {
      label: 'sealCode',
      key: 'sealCode',
      prop: 'sealCode'
    },
    {
      label: '添加时间',
      key: 'createdAt',
      prop: 'createdAt'
    },
    {
      label: '状态',
      key: 'isUse',
      render: row =>
        h(
          'span',
          {
            class:
                    !row.isUse
                      ? 'text-danger'
                      : 'text-success'
          },
          !row.isUse ? '禁用' : '启用'
        )
    },
    {
      label: '操作',
      slot: 'action',
      width: '120',
      fixed: 'right'
    }
  ]),
  data = ref([
    {
      id: 1,
      name: '名称',
      role: '1,2',
      status: 1
    }
  ]),
  getTableData = async () => {
    const res = await sealList({ unitCode: userInfo.value.unitCode })
    data.value = res.data
  },
  changeStatusData = (data, type) => {
    const text = type === 1 ? '删除' : data.isUse ? '禁用' : '启用'
    proxy.$messageBox
      .confirm(`是否${text}该流程?`, '提示！', {
        type: 'warning'
      })
      .then(async () => {
        await sealDel({
          isUse: !data.isUse,
          sealCode: data.sealCode,
          type
        })
        proxy.$message.success(`${text}成功！`)
        getTableData()
      })
  },
  // 操作弹窗-增加印章
  dialogData = reactive({
    visible: false
  }),
  showDialog = row => {
    dialogData.visible = true
  },
  close = flag => {
    dialogData.visible = false
    if (flag) {
      getTableData()
    }
  }
onMounted(() => {
  getTableData()
})
</script>

<template>
  <el-card class="elCard" title="印章列表" shadow="never">
    <div class="flexRight mb-8">
      <el-button type="primary" @click="showDialog">添加印章</el-button>
    </div>
    <el-alert
      style="margin:0px 0px 8px"
      :closable="closable"
      type="warning"
      show-icon
    >
      <template #title>
        <p>
          添加印章前请先登录浙江省政府电子印章系统申请
          <a href="http://seal.zj.gov.cn/" target="_blank">
            http://seal.zj.gov.cn/
          </a>
        </p>
      </template>
    </el-alert>
    <table-list
      ref="tableListRef"
      :column="column"
      :data="data"
      :pagination="false"
      @get-table-data="getTableData"
    >
      <template #img="{scope}">
        <img
          :src="`data:image/png;base64,${scope.row.sealBase64}`"
          style="width: 100px; height: 100px"
        />
      </template>
      <template #action="{ scope }">
        <a class="text-primary" @click="changeStatusData(scope.row,2)">{{ scope.row.isUse?'禁用':'启用' }}</a>
        <a class="text-danger" @click="changeStatusData(scope.row,1)">删除</a>
      </template>
    </table-list>
  </el-card>
  <sealCodeDialog
    :visible="dialogData.visible"
    @close="close"
  />
</template>

<style lang="less" scoped>
.elCard {
  :deep(.el-alert) {
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
    color: rgba(0, 0, 0, 0.65);
    .el-icon {
      color: #1890ff;
    }
  }
}
</style>
