<template>
  <el-table border :data="tableData" style="width: 601px">
    <el-table-column label="套餐类型" width="200" align="center">
      <template slot-scope="scope">
        <el-checkbox
          @change="handleChange(scope.row)"
          :label="scope.row.Title"
          v-model="scope.row.selected"
          :disabled="scope.row.disable"
          style="width: 100%; text-align: left; padding-left: 50px"
        ></el-checkbox>
      </template>
    </el-table-column>
    <el-table-column width="200">
      <template slot-scope="scope">
        <span style="cursor: pointer; color: #409eff; padding-left: 50px" v-if="scope.row.selected" @click="handleShow(scope.row)">{{ scope.row.text1 }}</span>
      </template>
    </el-table-column>
    <el-table-column width="200" align="center">
      <template slot-scope="scope">
        <span style="cursor: pointer; color: #409eff" v-if="scope.row.selected && scope.row.Value" @click="handleDownloadImg(scope.row)">{{ scope.row.text2 }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "ficcServiceTable",
  props: {
    serviceData: [],
    hasSercive: [],
    canEdit: false,
    editValue: {},
    contractType:null,
    isEdit:false // 是新增合同还是修改合同
  },
  data() {
    return {
      tableData: []
    };
  },
  watch: {
    editValue(nval, oval) {
      if (nval.ServiceTemplateId) {
        this.tableData.forEach((item) => {
          if (item.ServiceTemplateId === nval.ServiceTemplateId) {
            item.Value = nval.Value;
            // item 表格数据 nval 更新的数据
            // 更新表头 item.Detail[0]
            console.log([nval.tableHeadData,...nval.tableData]);
            let arr=[nval.tableHeadData,...nval.tableData].map((item2,index2)=>{
              
              let obj={}
              item2.forEach((item3,index3)=>{
                let key=`Col${index3+1}`
                obj={...obj,[key]:JSON.stringify(item3)}
              })
              return obj
            })
            console.log(arr);
            item.Detail=arr


            
          }
        });
      }
    },

    serviceData: {
      // 一开始进来 serviceData数据为空数组
      handler() {
        this.initTableData();
      },
      immediate: true,
      deep: true,
    },

    contractType(nval){
      if(nval==='补充协议'){
        this.tableData.forEach(item=>{
          //大套餐 禁用
          if(item.ServiceTemplateId===1){
            item.disable=true
            item.selected=false
          }else{
            item.disable=false
          }
          // 需求更改，新增合同类型为"补充协议的时候"，不默认勾选宏观经济
          // 将默认的勾选的宏观经济去除
          if(item.ServiceTemplateId===2 && !this.isEdit){
            for (let i = 0; i < item.Detail.slice(3,6).length; i++) {
              let temp = JSON.parse(item.Detail.slice(3,6)[i].Col2)
              temp.ValueId.length=0
              temp.Value=""
              item.Detail.slice(3,6)[i].Col2 = JSON.stringify(temp)
            }
          }
        })
      }else{
        // 如果一个都没选中过 则重置都为非禁用
        let flag=0
        this.tableData.forEach(item=>{
          if(item.selected){
            flag++
          }
        // "补充协议"切换会其他合同类型时，恢复默认，即勾选宏观经济的状态
          if(item.ServiceTemplateId===2 && !this.isEdit){
            for (let i = 0; i < item.Detail.slice(3,6).length; i++) {
              let temp = JSON.parse(item.Detail.slice(3,6)[i].Col2)
              if(temp.ValueId.length===0){
                temp.ValueId[0]=1
                temp.Value="宏观经济"
                item.Detail.slice(3,6)[i].Col2 = JSON.stringify(temp) 
              }
            }
          }
        })
        if(flag==0){
          this.tableData.forEach(item=>{
            item.disable=false
          })
        }
      }
    }
  },
  methods: {

    // 初始化数据
    initTableData() {
      if (this.serviceData.length === 0) return;
      let arr = this.serviceData.map((item, index) => {
        return {
          ...item,
          selected: false,
          disable: false,
          text1: item.Detail ? "选择品种" : "查看报价单",
          text2: "下载报价单",
        };
      });

      // 合同详情或者是需要编辑情况下
      if (this.hasSercive.length !== 0) {
        arr.forEach((item) => {
          this.hasSercive.forEach((e) => {
            if (e.ServiceTemplateId === item.ServiceTemplateId) {
              item.Value = e.Value;
              item.Detail = e.DetailList || e.Detail;
              item.selected = true;
              item.disable = false;
            }

            if (item.SelectType === "radio" && e.ServiceTemplateId !== item.ServiceTemplateId) {
              if (!item.selected) {
                item.disable = false;
              }
            }
          });
        });

        // 合同详情 全部禁用
        if (!this.canEdit) {
          arr.forEach((item) => {
            item.disable = true;
            // 如果是小套餐类型 即存在Detail 则将选择品种改为查看报价单
            if (item.Detail) {
              item.text1 = "查看报价单";
            }
          });
        }

        // this.tableData = arr;
      } else {
        // 新增 默认选择第一个
        // arr.forEach((item, index) => {
        //   if (index === 0) {
        //     item.selected = true;
        //   }
        // });
        //如果第一个是单选的 则将其他的禁用
        // if (arr[0] && arr[0].SelectType === "radio") {
        //   arr.forEach((item) => {
        //     if (item.ServiceTemplateId !== arr[0].ServiceTemplateId && item.SelectName === arr[0].SelectName) {
        //       item.disable = true;
        //       item.selected = false;
        //     }
        //   });
        // }
      }

      if(this.contractType==='补充协议'){
        arr.forEach(item=>{
          //大套餐 禁用
          if(item.ServiceTemplateId===1){
            item.disable=true
            item.selected=false
          }else{
            item.disable=false
          }
        })
      }
      
      this.tableData = arr;
    },
    
    // 选项切换
    handleChange(e) {
      if (e.SelectType === "radio") {
        if (e.selected) {
          this.tableData.forEach((item) => {
            if (item.ServiceTemplateId !== e.ServiceTemplateId && item.SelectName === e.SelectName) {
              item.disable = true;
              item.selected = false;
            }
          });
          // 如果是小套餐则 主动展示弹窗
          if(e.Detail&&e.Detail.length){
            this.handleShow(e)
          }
        } else {
          this.tableData.forEach((item) => {
            if (item.ServiceTemplateId !== e.ServiceTemplateId && item.SelectName === e.SelectName) {
              // 如果选择了补充协议 则大套餐仍然不可选
              if(this.contractType==='补充协议'&&item.ServiceTemplateId===1){
                item.disable=true
                item.selected=false
              }else{
                item.disable = false;
                item.selected = false;
              }
            }
          });
        }
      }
    },

    //下载报价单
    handleDownloadImg(e) {
      let link = document.createElement("a");

      //判断e.Value是否以 http开头
      if (e.Value.startsWith("http")) {
        link.href = e.Value + "?response-content-type=application/octet-stream"; //下载链接
      } else {
        link.href = e.Value;
      }
      link.setAttribute("download", e.Title);
      link.style.display = "none"; //a标签隐藏
      document.body.appendChild(link);
      link.click();
    },

    handleShow(e) {
      this.$emit("handleShowService", e);
    },
  },
};
</script>

<style></style>
