<template>
  <div class="service-content-wrap">
    <!-- 大套餐或其他等直接查看图片类型的 -->
    <el-dialog v-dialogDrag top="5vh" :visible.sync="serviceShow" custom-class="self-dialog-c" :modal-append-to-body="false" @close="handleServiceClose" :show-close="false" v-if="!serviceCon.Detail">
      <!-- <h2 class="title">{{ serviceCon.Title }}</h2> -->
      <div slot="title">
        <!-- 权益合同和ficc合同有别 -->
        {{this.roleType}}
        <h2 class="title">{{this.roleType == 'ficc_seller'?serviceCon.Title:serviceCon.showTitle }}</h2>
      </div>
      <img class="img" style="width: 100%; display: block; margin: 0 auto 20px auto" 
      :src="this.roleType == 'ficc_seller'?serviceCon.Value:serviceCon.showValue" />
      <div style="text-align: center; margin-bottom: 30px">
        <el-button type="primary" @click="handleServiceClose">知道了</el-button>
      </div>
    </el-dialog>

    <!-- 小套餐 -->
    <el-dialog v-dialogDrag title="提示" width="65%" top="5vh" :visible.sync="serviceShow" :modal-append-to-body="false" @close="handleCancel"  v-else>
      <div slot="title">
        <img width="20" src="../../../assets/img/constract/select.png" alt="" style="vertical-align: middle" />
        <span style="vertical-align: middle">选择品种</span>
      </div>

      <!-- 选择种类部分  -->
      <!-- <div class="type-select-wrap">
        <h2>权限设置</h2>
        <div class="type-select-box">
          <div class="item flex" v-for="item in optionLists" :key="item.ClassifyName" style="margin-bottom: 20px">
            <el-checkbox
              :disabled="selectRowIndex === null"
              :indeterminate="item.CheckList.length > 0 && item.CheckList.length < item.Items.length"
              v-model="item.CheckAll"
              @change="handleCheckAllChange(item)"
              >{{ item.ClassifyName }}：</el-checkbox
            >
            <el-checkbox-group :disabled="selectRowIndex === null" v-model="item.CheckList" @change="handleCheckChange(item)">
              <el-checkbox :label="tag.ChartPermissionId" v-for="tag in item.Items" :key="tag.ChartPermissionId">{{ tag.PermissionName }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div> -->

      <!-- 表格部分 -->
      <div style="max-height: 70vh; overflow-y: auto; padding: 10px 0">
        <table id="table" ref="table" class="table-wrap" @click="showRightClickMenu = false">
          <thead>
            <tr style="background: #f0f2f5">
              <th class="table-item" v-for="item in tableHeadData" :key="item.Value">{{ item.Value }}</th>
            </tr>
          </thead>

          <tbody>
            <tr v-for="(row, rindex) in tableData" :key="rindex" :class="rindex === selectRowIndex ? 'row-dark' : null" >
              <td 
                class="table-item" 
                v-for="(item, cindex) in row" 
                :key="item" 
                @click="handleSelectRow(rindex,item)" 
                @contextmenu.prevent="rightClick(rindex, cindex, $event)" 
                :data-rindex="rindex" 
                :data-cindex="cindex"
              >
                <div v-if="item.Type === 'text'">
                  <img 
                    class="choose-icon" 
                    width="14" 
                    src="../../../assets/img/constract/icon-1.png" 
                    alt="" 
                    v-if="item.HeadName=='品种'&&!item.RowDisable"
                  />
                  <span 
                    v-if="!item.CanEdit" 
                    v-html="item.Value" 
                    :style="{paddingLeft:item.HeadName=='品种'&&!item.RowDisable?'15px':null,display:'inline-block'}"
                  ></span>
                  <el-input v-else type="textarea" placeholder="请输入" v-model="item.Value"></el-input>
                </div>
                <div v-if="item.Type === 'select'">
                  <div style="margin-bottom: 10px;font-size:15px">{{ item.Value }}</div>
                  <div style="text-align: left">
                    <el-checkbox-group v-model="tableSelectCheck[item.Value]">
                      <el-checkbox style="font-size:14px" :label="opt.id" v-for="opt in tableSelectList[item.Value]" :key="opt.id" @change="handleTableSelectChange(item.Value, rindex, cindex)">{{ opt.name }}</el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div style="margin: 40px 0; text-align: center">
        <el-button type="primary" style="margin-right: 44px" @click="handleSave">保存</el-button>
        <el-button type="primary" plain @click="handleCancel">取消</el-button>
      </div>
    </el-dialog>

    <!-- 权限选择弹窗 -->
    <el-dialog :visible.sync="showOpt" :modal-append-to-body="false" @close="closeOpt" v-dialogDrag>
      <div slot="title">
        <img style="vertical-align: middle" width="20" src="../../../assets/img/icons/add_icon.png" alt="" />
        <span style="vertical-align: middle">选择品种</span>
      </div>
      <div class="type-select-wrap">
        <div class="type-select-box">
          <div class="item flex" v-for="item in optionLists" :key="item.ClassifyName" style="margin-bottom: 30px">
            <el-checkbox
              :disabled="selectRowIndex === null"
              :indeterminate="item.CheckList.length > 0 && item.CheckList.length < item.Items.length"
              v-model="item.CheckAll"
              @change="handleCheckAllChange(item)"
              >{{ item.ClassifyName }}：</el-checkbox
            >
            <el-checkbox-group :disabled="selectRowIndex === null" v-model="item.CheckList" @change="handleCheckChange(item)">
              <el-checkbox :disabled="contractType!=='补充协议'&&tag.IsPublic==1" :label="tag.ChartPermissionId" v-for="tag in item.Items" :key="tag.ChartPermissionId">{{ tag.PermissionName }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div style="text-align:center">
          <el-button type="primary" @click="handleSaveOpt">保存</el-button>
          <el-button type="primary" plain @click="closeOpt">取消</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 新增列填写表头弹窗 -->
    <el-dialog :visible.sync="showInputHead" :modal-append-to-body="false" width="560px" top="20vh" v-dialogDrag>
      <div slot="title">
        <img style="vertical-align: middle" width="20" src="../../../assets/img/icons/add_icon.png" alt="" />
        <span style="vertical-align: middle">添加列</span>
      </div>
      <el-form :model="form" ref="headTitleForm" :rules="formRule" label-width="100px" @submit.native.prevent>
        <el-form-item label="表格名称" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <div style="text-align: center; margin-top: 70px; margin-bottom: 30px">
          <el-button type="primary" @click="handleConfirmHead">保存</el-button>
          <el-button type="primary" plain @click="handleCancelHead">取消</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 右键选项弹框 -->
    <div class="right-click-wrap" :style="position" v-show="showRightClickMenu">
      <div @click="handleUpdateTable(item.type)" v-for="item in rightClickCon" :key="item.type">{{ item.name }}</div>
    </div>

    <!-- 生成表格图片dom -->
    <table id="table-png" class="table-wrap">
      <thead>
        <tr style="background: #f0f2f5">
          <th class="table-item" v-for="item in tableHeadData" :key="item.Value" style="color: #333;font-size:15px">{{ item.Value }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rindex) in tableData" :key="rindex">
          <td class="table-item" v-for="item in row" :key="item" style="max-width: 300px">
            <div v-html="item.Value" style="color: #333;font-size:14px"></div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import { contractInterface } from "@/api/api.js";
export default {
  name: "serviceDialog",
  props: {
    serviceCon: null,
    serviceShow: {
      type: Boolean,
      default: false,
    },
    contractType:''
  },
  data() {
    return {
      showOpt:false,//选择权限弹窗

      optionLists: [], //权限列表数据
      tableHeadData: [], //表头数据
      tableData: [], //表格数据
      roleType:localStorage.getItem("Role"),
      tableSelectList: {
        商品复盘: [
          { id: 2, name: "能化专栏《化里化外》", select: false },
          { id: 4, name: "黑色专栏《知白守黑》", select: false },
          { id: 5, name: "有色专栏《有声有色》", select: false },
          // { id: 1, name: "《每日宏观商品复盘》", select: false },
          { id: 3, name: "《股债日评》", select: false },
        ],
        深度月报:[
          { id: 6, name: "宏观经济", select: false },
          { id: 7, name: "草根调研", select: false },
          // { id: 8, name: "PVC月报", select: false },
        ]
      }, //表格中自带选择的数据
      tableSelectCheck: {
        商品复盘: [],
      }, //表格中自带选择的数据选中项

      position: {
        top: 0,
        left: 0,
      }, //鼠标右击时的位置
      showRightClickMenu: false, //显示右键菜单
      rightClickCon: [
        { type: "selectRow", name: "选择该行" },
        { type: "insertColumn", name: "插入一列" },
        { type: "insertRow", name: "插入一行" },
        { type: "deleteColumn", name: "删除该列" },
        { type: "deleteRow", name: "删除该行" },
      ], //右键菜单内容

      showInputHead: false, //显示填写表头
      form: {
        title: "",
      }, //插入一列填写的表头数据
      formRule: {
        title: [{ required: true, message: "请填写名称", trigger: "blur" }],
      },

      selectIndex: {
        rindex: 0, //行序号
        cindex: 0, //列序号
      },
      selectRowIndex: null, //选择该行的序列
    };
  },
  watch: {
    // 初始化表格数据
    serviceCon: {
      handler() {
        this.initData();
      },
      // 开启深度监听，监听到‘补充协议’与其他合同类型切换时，对象里面客观经济的选中变化
      deep: true 
    },

    //选择上面选项更新表格数据
    // optionLists: {
    //   handler(nval, oval) {
    //     if (this.selectRowIndex === null) return;
    //     let arr = [];
    //     let arrId = [];

    //     let count = 0;
    //     nval.forEach((item) => {
    //       if (item.CheckAll) {
    //         count++;
    //       }
    //     });
    //     //全选
    //     if (count === nval.length) {
    //       arr = ["全品种"];
    //       nval.forEach((item) => {
    //         arrId = [...arrId, ...item.CheckList];
    //       });
    //     } else {
    //       nval.forEach((item) => {
    //         item.Items.forEach((item2) => {
    //           let flag = item.CheckList.indexOf(item2.ChartPermissionId);
    //           if (flag != -1) {
    //             arr.push(item2.PermissionName);
    //             arrId.push(item2.ChartPermissionId);
    //           }
    //         });
    //       });
    //     }

    //     // console.log(arr);
    //     this.tableData[this.selectRowIndex].forEach((item) => {
    //       if (item.HeadName === "品种") {
    //         item.Value = arr.join("、");
    //         item.ValueId = arrId;
    //       }
    //     });
    //   },
    //   deep: true,
    // },


    // 如果没有选择任何行则重置顶部选项数据
    selectRowIndex: {
      handler(nval, oval) {
        if (nval === null) {
          this.optionLists.forEach((item) => {
            item.CheckList = [];
          });
        }
      },
    },
  },

  created() {
    this.getPermissionOpt();
  },
  methods: {
    initData() {
      console.log("初始化");
      if (!this.serviceCon.Detail) return;
      let temarr = this.serviceCon.Detail.map((rowItem) => {
        let rowArr = [];
        for (let key in rowItem) {
          if (key.substr(0, 3) === "Col" && rowItem[key] !== "") {
            rowArr.push(JSON.parse(rowItem[key]));
          }
        }
        return rowArr;
      });

      this.tableHeadData = temarr[0];
      this.tableData = temarr.slice(1);
      // 回显表格内部选择的
      this.tableData.forEach((item) => {
        item.forEach((e) => {
          if (e.Type === "select") {
            let key = e.Value;
            item.forEach((e2) => {
              if (e2.HeadName === "品种") {
                if(e2.Value){
                  this.tableSelectCheck[key] = e2.ValueId;
                }else{
                  this.tableSelectCheck[key] = [];
                }
              }
            });
          }
        });
      });

    },

    //点击保存选择的权限数据
    handleSaveOpt(){
      if (this.selectRowIndex === null) return;
      let arr=[]
      let arrId=[]
      let count = 0
      this.optionLists.forEach((item) => {
        if (item.CheckAll) {
          count++;
        }
      });
      // 全选
      if(count===this.optionLists.length){
        arr = ["全品种"];
        this.optionLists.forEach((item) => {
          arrId = [...arrId, ...item.CheckList];
        });
      }else{
        this.optionLists.forEach((item) => {
          item.Items.forEach((item2) => {
            let flag = item.CheckList.indexOf(item2.ChartPermissionId);
            if (flag != -1) {
              arr.push(item2.PermissionName);
              arrId.push(item2.ChartPermissionId);
            }
          });
        });
      }

      // 找出和该行关联的行 同时修改品种栏数据
      let rowIndexarr=[]
      if(!this.tableData[this.selectRowIndex][0].RowName){
        rowIndexarr.push(this.selectRowIndex)
      }else{
        this.tableData.forEach((item,index)=>{
          if(item[0].RowName==this.tableData[this.selectRowIndex][0].RowName){
            rowIndexarr.push(index)
          }
        })
      }
      
      console.log(rowIndexarr);

      rowIndexarr.forEach(index=>{
        this.tableData[index].forEach((item) => {
          if (item.HeadName === "品种") {
            item.Value = arr.join("、");
            item.ValueId = arrId;
          }
        });
      })

      // this.tableData[this.selectRowIndex].forEach((item) => {
      //   if (item.HeadName === "品种") {
      //     item.Value = arr.join("、");
      //     item.ValueId = arrId;
      //   }
      // });
      this.showOpt=false
    },

    // 点击关闭选择权限弹窗
    closeOpt(){
      this.showOpt=false
      this.selectRowIndex=null
    },

    // 左键选择行
    handleSelectRow(rindex,data) {
      // 如果选择的行存在 选项数据则不允许选择 或者 该行不可选择 即RowDisable=true
      if(data.HeadName!='品种') return
      let tag = false;
      this.tableData[rindex].forEach((item) => {
        if (item.Type === "select"||item.RowDisable) {
          tag = true;
        }
      });
      if (tag) return;
      this.selectRowIndex = rindex;
      this.formatOptionList();
      this.showOpt=true
    },

    //获取顶部权限选项
    getPermissionOpt() {
      let CompanyType = localStorage.getItem("Role") === "ficc_seller" ? "ficc" : "权益";
      contractInterface.getPermissionList({ CompanyType }).then((res) => {
        if (res.Ret === 200) {
          let arr = res.Data.List;
          arr.forEach((item) => {
            item.Items=item.Items||[]
            item.CheckList = [];
            item.CheckAll = false;
            item.indeterminate = false;
          });
          this.optionLists = arr;
        }
      });
    },

    //每次选中一行时格式化顶部选择数据
    formatOptionList() {
      let valueId = [];
      this.tableData[this.selectRowIndex].forEach((item) => {
        if (item.HeadName === "品种") {
          valueId = item.ValueId;
        }
      });

      this.optionLists.forEach((item) => {
        item.CheckList = [];
        item.Items.forEach((e) => {
          let flag = valueId.indexOf(e.ChartPermissionId);
          if (flag != -1) {
            item.CheckList.push(e.ChartPermissionId);
          }
        });
        if (item.CheckList.length === item.Items.length) {
          item.CheckAll = true;
        } else {
          item.CheckAll = false;
        }
      });
    },

    //全选
    handleCheckAllChange(e) {
      let arr = e.Items.map((item) => {
        return item.ChartPermissionId;
      });
      e.CheckList = e.CheckAll ? arr : [];
      e.indeterminate = false;
      // 需求更改，合同类型为补充协议时不默认勾选宏观经济
      if(this.contractType!=='补充协议'){
        e.Items.forEach(_e=>{
          if(_e.IsPublic==1){
            e.CheckList.push(_e.ChartPermissionId)
          }
        })
        
      } 
    },

    //选择单个
    handleCheckChange(e) {
      e.CheckAll = e.CheckList.length === e.Items.length;
      e.indeterminate = e.CheckList.length > 0 && e.CheckList.length < e.Items.length;
    },

    //点击表格中选项数据
    handleTableSelectChange(title, rindex) {
      let arr = this.tableSelectCheck[title];
      let arr2 = [];
      this.tableSelectList[title].forEach((item) => {
        arr.forEach((e) => {
          if (e == item.id) {
            arr2.push(item.name);
          }
        });
      });
      this.tableData[rindex].forEach((item) => {
        if (item.HeadName === "品种") {
          item.Value = arr2.join("、");
          item.ValueId = arr;
        }
      });
    },

    //鼠标右键
    rightClick(rindex, cindex, event) {
      this.selectIndex.rindex = Number(rindex);
      this.selectIndex.cindex = Number(cindex);
      this.formatRightClickCon(rindex, cindex);
      this.showRightClickMenu = true;
      this.position.top = event.clientY + "px";
      this.position.left = event.clientX + "px";
    },

    //格式化鼠标右击显示内容
    formatRightClickCon(rindex, cindex) {
      let arr = [
        { type: "insertColumn", name: "向后插入一列", show: true },
        { type: "insertRow", name: "向后插入一行", show: true },
        { type: "deleteColumn", name: "删除该列", show: true },
        { type: "deleteRow", name: "删除该行", show: true },
      ];

      // 品种一列不允许删除
      if (this.tableHeadData[cindex].Tag === "品种"||this.tableHeadData[cindex].Tag === "FICC小套餐服务内容") {
        arr[2].show = false;
      }
      //删除列 不能少于两列
      if (this.tableHeadData.length <= 2) {
        arr[2].show = false;
      }

      //删除行 不能少于两行 并且商品复盘、周报、双周报、数据点评、月报必须有一个存在
      if (this.tableData.length <= 2) {
        arr[3].show = false;
      }

      let temarr=[]
      this.tableData.forEach(item=>{
        item.forEach(item2=>{
          if(item2.HeadName==='FICC小套餐服务内容'){
            if(item2.Value==='数据点评'||
            item2.Value==='FICC周报'||
            item2.Value==='商品双周报+线上电话会讨论会<br/>（由弘则的研究员主持线上讨论）'){
              temarr.push(item2.Value)
            }
          }
        })
      })
      if(temarr.length<2){
        this.tableData[this.selectIndex.rindex].forEach(item=>{
          if(item.Value==='数据点评'||
            item.Value==='FICC周报'||
            item.Value==='商品双周报+线上电话会讨论会<br/>（由弘则的研究员主持线上讨论）'){
              arr[3].show = false;
          }
        })
      }

      //新增列 不能超过6列
      if (this.tableHeadData.length >= 6) {
        arr[0].show = false;
      }

      this.rightClickCon = arr.filter((item) => {
        return item.show;
      });
    },

    // 点击 新增/删除 行/列  选择该行
    handleUpdateTable(type) {
      //删除行
      if (type === "deleteRow") {
        this.selectRowIndex = null;
        this.tableData.splice(this.selectIndex.rindex, 1);
      }

      //新增行
      if (type === "insertRow") {
        this.selectRowIndex = null;
        let arr = this.tableHeadData.map((item) => {
          let obj = { CanEdit: true, Type: "text", Value: "", ValueId: [], HeadName: item.Tag,RowDisable:false,RowName:''};
          if (item.Tag === "品种") {
            obj.CanEdit = false;
          }
          return obj;
        });

        this.tableData.splice(this.selectIndex.rindex + 1, 0, arr);
      }

      //删除列
      if (type === "deleteColumn") {
        this.selectRowIndex = null;
        this.tableHeadData.splice(this.selectIndex.cindex, 1);
        this.tableData = this.tableData.map((item) => {
          item.splice(this.selectIndex.cindex, 1);
          return item;
        });
      }

      //新增列
      if (type === "insertColumn") {
        this.selectRowIndex = null;
        this.showInputHead = true;
      }

      this.showRightClickMenu = false;
    },

    //点击确定新增表头内容
    handleConfirmHead() {
      this.$refs.headTitleForm.validate((valid) => {
        if (!valid) return;
        this.tableHeadData.splice(this.selectIndex.cindex + 1, 0, { CanEdit: false, Type: "text", Value: this.form.title, Tag: this.form.title });
        this.tableData = this.tableData.map((item) => {
          item.splice(this.selectIndex.cindex + 1, 0, { CanEdit: true, Type: "text", Value: "", HeadName: this.form.title,RowDisable:false,RowName:'' });
          return item;
        });
        this.showInputHead = false;
        this.form.title = "";
      });
    },

    //点击取消填写新增列头弹窗
    handleCancelHead() {
      this.$refs.headTitleForm.resetFields();
      this.showInputHead = false;
    },

    //点击保存
    handleSave() {
      let flag = this.validateData();
      if (!flag) return;

      // 生成表格图片
      html2canvas(document.getElementById("table-png"), {
        backgroundColor: "#ffffff",
        useCORS: true, // 允许图片跨域
        allowTaint: true, // 在渲染前测试图片
        imageTimeout: 0, // 加载延时
        scale:3,
      }).then((res) => {
        let img = res.toDataURL("image/png");
        this.$emit("serviceSave", {
          Value: img,
          ServiceTemplateId: this.serviceCon.ServiceTemplateId,
          tableData: this.tableData,
          tableHeadData: this.tableHeadData,
        });
        this.handleServiceClose();
      });
    },

    //点击取消
    handleCancel() {
      this.initData()
      this.handleServiceClose();
    },

    //校验数据
    validateData() {
      //判断品种列是否有值
      let arr = [];
      this.tableData.forEach((item) => {
        item.forEach((item2) => {
          if (item2.HeadName === "品种") {
            arr.push(...item2.ValueId);
          }
        });
      });
      // 判断行是否有值
      let arr2 = [];
      this.tableData.forEach((item, index) => {
        let arr = item.filter((item2) => {
          if (!item2.Value) return item2;
        });
        if (arr.length === this.tableHeadData.length) {
          arr2.push(index);
        }
      });

      // 商品复盘、周报、双周报、数据点评、月报 品种必须有一个选择了
      let arr3=[]
      this.tableData.forEach(item=>{
        item.forEach(item2=>{
          if(item2.Value==='数据点评'||
            item2.Value==='FICC周报'||
            item2.Value==='商品双周报+线上电话会讨论会<br/>（由弘则的研究员主持线上讨论）'){
              item.forEach(item3=>{
                if (item3.HeadName === "品种") {
                  arr3.push(...item3.ValueId);
                }
              })
          }
        })
      })


      let constractType=this.$parent.formData.constractType||this.$parent.formData.ContractType
      console.log(constractType);
      if (!arr.length&&constractType!=='补充协议') {
        this.$message.warning("至少选择一个品种");
        return false;
      }

      if (arr2.length) {
        this.$message.warning("行内至少填一项");
        return false;
      }

      if(!arr3.length&&constractType!=='补充协议'){
        this.$message.warning("周报、双周报、数据点评至少选择一个品种");
        return false;
      }

      return true;
    },

    //关闭弹窗
    handleServiceClose() {
      this.showRightClickMenu = false;
      this.selectRowIndex = null;
      this.$emit("serviceClose");
    },
  },
};
</script>

<style>
.self-dialog-c .el-dialog__header {
  background-color: #fff;
  padding: 15px 20px 0 20px !important;
}
.self-dialog-c{
  width: 60%;
}

/* .el-checkbox{
  margin-bottom: 20px;
} */
.table-item .el-checkbox__label {
  font-size: 14px !important;
}
.type-select-wrap .el-checkbox{
  margin-bottom: 10px;
}
.type-select-wrap .el-checkbox__label {
  font-size: 14px !important;
}
</style>

<style lang="scss" scoped>
.img{
  image-rendering: -moz-crisp-edges; 
  image-rendering: -o-crisp-edges; 
  image-rendering: -webkit-optimize-contrast; 
  image-rendering: crisp-edges; 
  -ms-interpolation-mode: nearest-neighbor;
}


.self-dialog-c .title {
  text-align: center;
  font-size: 18px;
  color: #333;
}
.flex {
  display: flex;
}
.table-wrap {
  position: relative;
  width: 100%;
  text-align: center;
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
  .row-dark {
    background-color: #deedff;
  }
  .table-item {
    padding: 20px 10px;
    border-right: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    min-width: 160px;
    position: relative;
    .table-item-mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0);
      z-index: 1000;
    }
    .choose-icon{
      position: absolute;
      top: 50%;
      left: 10px;
      transform:translateY(-50%);
    }
  }
}
.right-click-wrap {
  border-radius: 4px;
  background-color: #fff;
  padding: 10px 0;
  position: fixed;
  z-index: 5000;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  line-height: 2;
  div {
    cursor: pointer;
    padding: 0 20px;
    &:hover {
      background-color: #ebeef5;
    }
  }
}

.type-select-wrap {
  margin-bottom: 30px;
  .type-select-box {
    // margin-top: 20px;
    padding: 20px 30px 0 30px;
    border: 1px dashed #aab4cc;
    border-radius: 4px;
    margin-bottom: 20px;
  }
}


#table-png {
  position: absolute;
  z-index: -10;
  top: -100%;
  left: 0;
  width: 1000px;
}
</style>
