<template>
  <div
    ref="heights"
    style="height:100%;"
  >
    <basic-container class="see">
      <el-row
        :gutter="20"
        :style="{'height':heights-90+'px'}"
      >
        <el-col :span="6">
          <el-select
            style="width:100%;"
            v-model="value"
            placeholder="请选择"
            @change="changePosition"
            class="marbottom20"
          >
            <!-- clearable -->
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.contractName"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <div style="border-right:1px solid #EDEDED;;">
            <el-menu
              class="el-menu-vertical-demo"
              :style="{'height':heights-140+'px',overflow:'auto'}"
            >
              <div
                v-for="(item,keys) in menuData"
                :key='keys'
              >
                <el-submenu :index="item.roleId">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>{{item.roleName}}</span>
                  </template>
                  <el-menu-item-group
                    v-for="(val,k) in item.childRoleList"
                    :key='k'
                  >
                    <el-menu-item
                      :index="val.roleId"
                      @click="dakairight(val)"
                    >{{val.roleName}}</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </div>
            </el-menu>
          </div>
        </el-col>
        <el-col
          :span="18"
          class="martop20"
        >
          <div
            v-show="!rightData.length==0"
            class="martop20"
            v-for="(item,key) in rightData"
            :key='key'
          >
            <div class="flexBetween">
              <div class="flexStar">
                <div
                  class="flexItemsC"
                  style="width:220px;"
                >姓名:{{item.certificateUserName}}</div>
                <div
                  class="flexStar flexItemsC"
                  style="width:220px;"
                >签名图片:
                  <el-image
                    style="width:40px;"
                    :src="item.signatureFileUrl"
                    :preview-src-list="[item.signatureFileUrl]"
                  >
                  </el-image>
                </div>
                <div
                  class="flexItemsC"
                  style="width:560px;"
                >证书: {{item.certificateUserName}}- {{item.certificateFileUrl|urlsplice}}</div>
                <div
                  class="flexItemsC"
                  v-show="item.pfxType != '-1'"
                >签章类型: {{item.pfxType}}</div>
              </div>
              <el-button
                size="mini"
                @click="deleteAutograph(item.id,key)"
              >删除签名配置</el-button>
            </div>
            <el-divider></el-divider>
          </div>
          <el-empty
            :style="{'height':heights-100+'px'}"
            description="该目录没有数据"
            v-show="rightData.length==0"
          ></el-empty>
        </el-col>
      </el-row>
    </basic-container>
  </div>
</template>

<script>
import { remove, } from "@/api/certificate/list";
import { queryAllRoleList, queryContractList } from "@/api/certificate/management";
export default {
  data () {
    return {
      heights: '',
      options: [],
      value: '',
      menuData: [],
      rightData: [],
    }
  },
  methods: {
    //#region 左侧菜单
    dakairight (signPfxFileList) {
      this.rightData = signPfxFileList.signPfxFileList
    },
    changePosition () {//下拉框change事件
      // if (this.value && this.options.length > 0) {
      //   this.options.forEach(val => {
      //     if (val.roleId == this.value) {
      //       this.menuData = [val]
      //       this.rightData = []
      //     }
      //   })
      // }
      this.rightData = [];
      this.queryAllRoleList(this.value);
    },
    deleteAutograph (ids) {
      let _that = this
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _that.remove(ids)

      }).catch(() => {
      });
    },
    //#endregion

    //#region 接口
    async queryAllRoleList (contractId) {//左侧菜单
      const { data: res } = await queryAllRoleList({ contractId })
      console.log(res);
      if (res.code == 200) {
        this.menuData = res.data

      }
    },
    async queryContractList (contractId) {
      const { data: res } = await queryContractList({ contractId });
      console.log(res);
      if (res.code == 200) {
        this.options = res.data
      }
    },
    async remove (ids, key) {
      const { data: res } = await remove({ ids })
      console.log(res);
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.queryAllRoleList(this.value)
        this.rightData.splice(key, 1)
      }
    },
    //#endregion
  },
  filters: {
    urlsplice (url) {
      let da = ''
      if (url) {
        da = url.slice(url.indexOf('/', url.indexOf('/', url.indexOf('/', url.indexOf('/', url.indexOf('/', url.indexOf('/', 0) + 1) + 1) + 1) + 1) + 1) + 1)
      }
      return da
    },
  },
  watch: {
    'value' (val) {
      if (val) {
        this.queryAllRoleList(val);//左侧菜单
      } else {
        this.menuData = []
        this.rightData = []
      }
    },
  },
  created () {
    this.value = this.$route.query.contractId;
    this.queryContractList(this.$route.query.contractId);//下拉枚举
  },
  mounted () {
    this.heights = this.$refs.heights.clientHeight
  },
}
</script>
<style lang="scss" scoped>
</style>
