<template>
  <div class="common-page page-t1 cm-layout scrolling4">
    <div class="option page-row">
      <table-filter
        ref="filter"
        :form="form"
        :Dict="Dict"
        :rules="rules"
        :config="form.config"
        :loadData="loadData"
      />
    </div>
    <div class="panel-bottom page-row">
      <div class="ctin-box">
        <div class="content-within">
          <div class="content-fix">
            <div class="toolbar">
              <div>
				<el-button type="text" style="font-size: 18px;">公司数：{{ table.total }}</el-button>
                <el-button
                  v-for="(item, key) in form.config.otherBtn"
                  v-show="item.name==='添加企业' || showYN"
                  size="mini"
                  :type="item.type"
                  :icon="item.icon"
                  @click="item.callback.call(_self, $event)"
                  >{{ item.name }}</el-button
                >

				<!-- <el-button type="primary" size="mini" icon="el-icon-upload" @click="dialogVisible=true">导入企业基础信息</el-button>
				<el-button type="primary" size="mini" icon="el-icon-upload">导入企业经营信息</el-button> -->
              </div>
              <div v-if="showYN">
                <el-button
                  v-for="(item, key) in form.config.rightBtn"
                  size="mini"
                  :type="item.type"
                  :icon="item.icon"
                  @click="item.callback.call(_self, $event)"
                  >{{ item.name }}</el-button
                >
              </div>
            </div>
            <!-- 表格渲染 -->
            <cu-table
              ref="cuTable"
              :table="table"
              :Dict="Dict"
              :config="form.config"
              :loadData="loadData"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 表单渲染 -->
    <cu-form
      ref="cuForm"
      :form="form"
      :Dict="Dict"
      :rules="rules"
      :submit="submitForm"
      :cancel="cancelForm"
      :watchKeys="['paperfilename']"
    />
	
	<!-- 导入 -->
	<!-- <el-dialog
    title="上传 Excel 模板"
    :visible.sync="dialogVisible"
    width="400px"
  >
    <el-form>
      <el-form-item>
        <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-success="handleSuccess"
          :before-upload="beforeUpload"
          accept=".xls, .xlsx"
          >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传xls/xlsx文件，且不超过500kb</div>
          <el-button
                    slot="tip"
                    type="text"
                    size="small"
                    @click="downloadTemplate"
                  >下载模板</el-button>
        </el-upload>
       
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="hasBasicInfo">是否已存在企业基础信息数据</el-checkbox>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitImport">确 定</el-button>
    </span>
  </el-dialog> -->

    <div
      id="basicView"
      class="el-message-box__wrapper"
      style="z-index: 2001; background-color: rgba(0, 0, 0, 0.5)"
      v-if="basicActv"
    >
      <div class="kmb-message-box custom-alert">
        <div
          class="el-message-box__content"
          style="min-width: 300px; width: undefined"
        >
          <div class="alert-ctbox">
            <div style="width: 15rem; min-height: 85vh; position: relative">
              <div class="p-head" style="padding-top: 5px; display: flex">
                <el-tabs
                  v-model="tabindex"
                  type="card"
                  @tab-click="handleClick"
                >
                  <el-tab-pane label="企业基本信息" name="0">
                    <div class="rel-flex">
                      <div class="scrolling4">
                        <!-- 针对详情显示，输入框组以父元素框为准，子元素框忽略，在此处理 -->
                        <div v-for="(item, key) in Dict.baseInfo" style="" :class="{'isHide': item.mode===7, [key]: item.mode===7}" v-if="!item.inputCombineArr_2">
                          <!-- 以下div根据组合输入框特殊处理 -->
                          <div class="item" v-if="item.inputCombineArr_1">
                            <template  v-for="(item, key) in item.inputCombineArr_1">
                              <span class="name" v-if="catchItem[key] || catchItem[key] === false" style="font-weight:bold;">{{ item.name }} ：</span>
                              <!-- <font>{{catchItem[key]}}</font
                              > -->
                              <template v-if="item.type === 'select'">
                                <font
                                  v-for="obj in Dict.selectList[key]"
                                  v-if="obj.value === catchItem[key]"
                                  style="margin-right:30px;"
                                  >{{ obj.name }}</font
                                >
                              </template>
                              <!-- v-if判断用于针对日期主输入框为false值的时候特殊处理。日期没有值直接隐藏 -->
                              <template v-else>
                                  <font v-if="catchItem[key] || catchItem[key] === false">{{
                                    catchItem[key]
                                  }}</font>
                              </template>
                            </template>
                          </div>
                          <div class="item" v-else>
                            <span class="name" style="font-weight:bold;">{{ item.name }} ：</span>
                            <template v-if="item.type === 'select'">
                              <font
                                v-for="obj in Dict.selectList[key]"
                                v-if="obj.value === catchItem[key]"
                                >{{ obj.name }}</font
                              >
                              <!-- <el-select v-model="catchItem[key]" :placeholder="item.name" size="small" :style="'width:'+(item.width || 'auto')" :disabled="true" :multiple="item.multiple || false" @change="eventTransmit(item.change)">
												<el-option v-for="obj in Dict.selectList[key]" :label="obj[item.key||'name']" :value="obj[item.val] || obj.value" ></el-option>
											</el-select> -->
                            </template>
                            <template v-else>
                              <font v-if="key !== 'introduction'">{{
                                catchItem[key]
                              }}</font>
                              <div v-else v-html="catchItem[key]"></div>
                            </template>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="产品图片与简介" name="1"> </el-tab-pane>
                  <el-tab-pane label="企业经营信息管理" name="2"></el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
        </div>
        <button
          class="el-message-box__headerbtn el-icon-close"
          @click="close"
        ></button>
      </div>
    </div>

    <!-- <div id="basicView" class="el-message-box__wrapper " style="z-index:2000;background-color:rgba(0, 0, 0, 0.5);" v-if="popupTabel.status.cu" ><div class="kmb-message-box custom-alert"><div class="el-message-box__content" style="min-width:300px;width:undefined"><div class="alert-ctbox">
		<div style="width:15rem;min-height:85vh;position:relative;">
			<div class="p-head" style="padding-top:5px;display:flex;">
				<iframe id="iframe" :src="iframeSrc" style="height:100%;width:100%" @onload="iload"></iframe>
			</div>
		</div>
		</div></div><button class="el-message-box__headerbtn el-icon-close" @click="close2"></button></div></div> -->
  </div>
</template>

<script>
import { reqApi, Config } from "@/assets/js/httpApi.js";
import { Tools } from "@/assets/js/common.js";
import DateRangePicker from "@/components/DateRangePicker";
import TableFilter from "@/components/TableFilter/index2";
import cuForm from "@/components/cuForm/index2";
import cuTable from "@/components/cuTable/index2";

export default {
  name: "Dashboard",
  components: {
    DateRangePicker,
    TableFilter,
    cuForm,
    cuTable,
  },
  data() {
    return {
      showYN: !Tools.isHighTech(),
		dialogVisible: false,
      uploadError: '',
      hasBasicInfo: false,
      Dict: { selectList: [] },
      table: {
        page: 1,
        size: 10,
        total: 0,
        loading: false,
        dataList: [],
      },
      rules: {},
      form: {
        title: "",
        visible: false,
        reqType: "add",
        historyDialog: false,
        status: { cu: 0 },
        query: {},
        search: {},
        item: {},
        file: 0,
        config: {},
      },
      basicActv: false,
      tabindex: 0,
      catchItem: {},

      popupTabel: {
        status: { cu: 0 },
        page: 1,
        size: 10,
        total: 0,
        loading: false,
        dataList: [],
      },

      iframeSrc: "",
    };
  },
  created() {
    // 获取基本信息
    this.pageApi = Config.getModuleInfo(this);
    this.Dict = this.pageApi.Dict;
    this.form.config = this.pageApi.config;
    this.rules = reqApi.getRules(this.Dict.baseInfo) || this.Dict.rules || {};
    this.pageApi.created && this.pageApi.created();
  },
  mounted() {
    this.$nextTick(() => {
      var self = this;
      this.loadData();
    });

    // 获取选择列表字典
    var selectList = this.Dict.selectList;
    Tools.asyncLoop.call(this, selectList, function (key, value, next) {
      typeof value.request === "function" && (value = value.request);
      if (typeof value === "function") {
        value.call(this.Dict).then(function (res) {
          res.request = value;
          selectList[key] = res;
          next();
        });
      } else {
        next();
      }
    });
  },
  watch: {

    'form.visible':{
      handler(newValue) { 
        /**
         * 针对form处理逻辑，企业孵化装填字段好用，单独处理。（是否科技型中小也可以，不过为了布局，暂不放在这里面处理）
         */
        // console.log('编辑表单模态框显隐11！！！', this.form.item)
        const tempArr = [{
          key: 'incubationStatus', // 企业孵化状态
          subKey: 'graduationDate' // 子元素（随着主元素值改变而显隐处理）
        }
        ]
        tempArr.forEach((item, index)=>{ 
          if( this.form.item[item.key]){ // 根据下拉列表获取当前对应的父下拉框的值
            this.Dict.baseInfo[item.subKey].form = 1 // 父下拉框值为是，则显示子元素
          }else{
            this.Dict.baseInfo[item.subKey].form = 0
          }
        })


        setTimeout(()=>{ // 用于详情弹窗显隐处理
            [{
              key: 'isHighGrowthInnovative',  // 主元素
              subKey: 'highGrowthInnovativeDate' // 子元素（随着主元素值改变而显隐处理）
            },
            {
              key: 'isHighTech',
              subKey: 'highTechDate'
            }, 
            {
              key: 'isTechSme',
              subKey: 'techSmeDate'
            },
            {
              key: 'isAdvancedTechService',
              subKey: 'advancedTechServiceDate'
            },
            {
              key: 'isSpecializedSpecialEnterprises',
              subKey: 'specializedSpecialEnterprisesDate'
            },
            {
              key: 'isLittleGiant',
              subKey: 'littleGiantDate'
            },
            {
              key: 'isGazelle',
              subKey: 'gazelleDate'
            }
            
          ].forEach((item, index)=>{ 
            this.toggleDateElement(item.subKey, this.form.item[item.key]);

          })
       },1000) 


      },
      immediate: true // 立即调用处理函数
    },
    // 'basicActv':{ 
    //   handler(newValue) {
    //     // 针对联动输入框显隐设置

		//     console.log('模态框显隐！！！', this.Dict)
    //     setTimeout(()=>{ // 用于详情弹窗显隐处理
    //       [{
    //         key: 'isHighGrowthInnovative',  // 主元素
    //         subKey: 'highGrowthInnovativeDate' // 子元素（随着主元素值改变而显隐处理）
    //       },
    //       {
    //         key: 'isHighTech',
    //         subKey: 'highTechDate'
    //       },
    //       {
    //         key: 'isAdvancedTechService',
    //         subKey: 'advancedTechServiceDate'
    //       },
    //       {
    //         key: 'isSpecializedSpecialEnterprises',
    //         subKey: 'specializedSpecialEnterprisesDate'
    //       },
    //       {
    //         key: 'isLittleGiant',
    //         subKey: 'littleGiantDate'
    //       },
    //       {
    //         key: 'isGazelle',
    //         subKey: 'gazelleDate'
    //       }
           
    //     ].forEach((item, index)=>{ 
    //       this.toggleDateElement(item.subKey,  this.catchItem[item.key]);

    //     })
    //   //    this.toggleDateElement("highGrowthInnovativeDate", this.form.item.isHighGrowthInnovative);

    //    },1000)
    //   },
    //   immediate: true // 立即调用处理函数
    // },
	"form.item.isHighGrowthInnovative": {
      handler(newValue) {
		this.toggleDateElement("highGrowthInnovativeDate", newValue);
      },
      immediate: true // 立即调用处理函数
    },
	"form.item.isHighTech": {
      handler(newValue) {
		this.toggleDateElement("highTechDate", newValue);
      },
      immediate: true, // 立即调用处理函数
      deep: true,
    },
	"form.item.isAdvancedTechService": {
      handler(newValue) {
		this.toggleDateElement("advancedTechServiceDate", newValue);
      },
      immediate: true // 立即调用处理函数
    },
	"form.item.isSpecializedSpecialEnterprises": {
      handler(newValue) {
		this.toggleDateElement("specializedSpecialEnterprisesDate", newValue);
      },
      immediate: true // 立即调用处理函数
    },
	"form.item.isTechSme": {
      handler(newValue) {
		this.toggleDateElement("techSmeDate", newValue);
      },
      immediate: true // 立即调用处理函数
    },

	"form.item.isLittleGiant": {
      handler(newValue) {
		this.toggleDateElement("littleGiantDate", newValue);
      },
      immediate: true // 立即调用处理函数
    },

	"form.item.isGazelle": {
      handler(newValue) {
		this.toggleDateElement("gazelleDate", newValue);
      },
      immediate: true // 立即调用处理函数
    },
 
  },
  methods: {
	beforeUpload(file) {
      // 这里可以加入文件格式校验等
      const isExcel = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
      if (!isExcel) {
        this.uploadError = '请上传 Excel 文件!';
      } else {
        this.uploadError = '';
      }
      return isExcel;
    },
    handleSuccess(response, file) {
      console.log('上传成功:', response);
    },
    downloadTemplate() {
      // 替换为下载模板的链接
      window.open('YOUR_TEMPLATE_URL', '_blank');
    },
    submitImport() {
      // 提交逻辑
      console.log('是否已存在信息:', this.hasBasicInfo);
      this.dialogVisible = false;
    },
    toggleDateElement(targetEleClass, flag) {
      // console.log(targetEleClass, flag, '切换样式')
      const elements = document.getElementsByClassName(targetEleClass);
      // console.log(elements)
      if (elements.length) {
        for (let i = 0; i < elements.length; i++) {
          const element = elements[i];
          flag ? element.classList.remove("isHide") : element.classList.add("isHide");
          }
 
		// console.log('值改变了，日期切换', element.classList,element.classList.contains("isHide"))
        // if (element.classList.contains("isHide")) {
        //   element.classList.remove("isHide"); // 移除 'hidden' 类
        // } else {
        //   element.classList.add("isHide");
        // }
      }

    },
    loadData: reqApi.common.getRequst,
    cancelForm() {
      this.form.visible = false;
    },
    submitForm(form, item) {
      if (this.form.item.isHighGrowthInnovative) {
        if (!this.form.item.highGrowthInnovativeDate) {
          this.$message.warning("请填写评选日期");
          return;
        }
      } else {
        this.form.item.highGrowthInnovativeDate = "";
      }

      if (this.form.item.isHighTech) {
        if (!this.form.item.highTechDate) {
          this.$message.warning("请填写评选日期");
          return;
        }
      } else {
        this.form.item.highTechDate = "";
      }
      if (this.form.item.isAdvancedTechService) {
        if (!this.form.item.advancedTechServiceDate) {
          this.$message.warning("请填写评选日期");
          return
        }
      } else {
        this.form.item.advancedTechServiceDate = "";
      }
      if (this.form.item.isSpecializedSpecialEnterprises) {
        if (!this.form.item.specializedSpecialEnterprisesDate) {
          this.$message.warning("请填写评选日期");
          return;
        }
      } else {
        this.form.item.specializedSpecialEnterprisesDate = "";
      }
      if (this.form.item.isLittleGiant) {
        if (!this.form.item.littleGiantDate) {
          this.$message.warning("请填写评选日期");
          return;
        }
      } else {
        this.form.item.littleGiantDate = "";
      }
      if (this.form.item.isTechSme) {
        if (!this.form.item.techSmeDate) {
          this.$message.warning("请填写评选日期");
          return;
        }
      } else {
        this.form.item.techSmeDate = "";
      }

      if (this.form.item.isGazelle) {
        if (!this.form.item.gazelleDate) {
          this.$message.warning("请填写评选日期");
          return;
        }
      } else {
        this.form.item.gazelleDate = "";
      }
      reqApi.common.submitForm.call(this, form, item);
    },

    handleClick: function (tab, event) {
      var self = this;
      if (~~tab.index === 1) {
        if (self.i1 && self.i1.contentWindow) {
          self.i1 && self.i1.contentWindow.location.reload();
        } else {
          var i1 = (self.i1 = document.createElement("iframe"));
          var companyId = this.catchItem.id;
          i1.src = "/business/product?companyId=" + companyId;
          i1.style.cssText = "display:none;border:0;height:100%;width:100%;";
          i1.onload = function () {
            i1.style.display = "block";
          };
          tab.$el.appendChild(i1);
        }
      } else if (~~tab.index === 2) {
        if (self.i2 && self.i2.contentWindow) {
          self.i2 && self.i2.contentWindow.location.reload();
        } else {
          var i2 = (self.i2 = document.createElement("iframe"));
          var companyId = this.catchItem.id;
          i2.src = "/business/achievement?companyId=" + companyId;
          i2.style.cssText = "display:none;border:0;height:100%;width:100%;";
          i2.onload = function () {
            i2.style.display = "block";
          };
          tab.$el.appendChild(i2);
        }
      }
    },

    close: function () {
      this.basicActv = false;
    },
    close2: function () {
      this.popupTabel.status.cu = 0;
    },
    iload: function () {},
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scope>
.inputCombine_1{
  .el-form-item__content{
    width: 73px;

  }
}
.inputCombine_2{
  .el-form-item__content, .el-date-editor.el-input, .el-date-editor.el-input__inner{
    width: 140px;
  }

  .el-date-editor.el-input, .el-date-editor.el-input__inner {
      width: 140px !important;
  }
}


// // 模态框日期框样式调整
.el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 216px !important;
}

	.isHide{
			// display: none !important;
      visibility: hidden !important;
    }
.p-head {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;

  .el-tabs {
    flex: 1;
    display: flex;
    width: 100%;
    margin: 0;
    flex-direction: column;
  }

  .el-tabs__content {
    flex: 1;
    display: flex;
    > div {
      flex: 1;
    }
    .rel-flex {
      height: 100%;
    }
    .scrolling4 {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      overflow-y: auto;
      display: grid;
      grid-template-columns: 50% 50%;
      .item {
        line-height: 3;
        //span{color:#C0C4CC;}
        //font{color:#000;}
      }
    }
    .scrolling4::-webkit-scrollbar {
      width: 6px;
      height: 8px;
      cursor: pointer;
    }
  }
}
</style>
