<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"
                  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>
                <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="">
                          <div class="item">
                            <span class="name">{{ 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";

export default {
  name: "Dashboard",
  components: {
    DateRangePicker,
    TableFilter,
    cuForm,
    cuTable,
  },
  data() {
    return {
		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.item.isHighGrowthInnovative"(newVal, oldVal) {
    //   this.toggleDateElement("highGrowthInnovativeDate");
    // },
	"form.item.isHighGrowthInnovative": {
      handler(newValue) {
		this.toggleDateElement("highGrowthInnovativeDate", newValue);
      },
      immediate: true // 立即调用处理函数
    },
    // "form.item.isHighTech"(newVal, oldVal) {
    //   this.toggleDateElement("highTechDate");
    // },
	"form.item.isHighTech": {
      handler(newValue) {
		this.toggleDateElement("highTechDate", newValue);
      },
      immediate: true // 立即调用处理函数
    },
	"form.item.isAdvancedTechService": {
      handler(newValue) {
		this.toggleDateElement("advancedTechServiceDate", newValue);
      },
      immediate: true // 立即调用处理函数
    },
    // "form.item.isAdvancedTechService"(newVal, oldVal) {
    //   this.toggleDateElement("advancedTechServiceDate");
    // },
	"form.item.isSpecializedSpecialEnterprises": {
      handler(newValue) {
		this.toggleDateElement("specializedSpecialEnterprisesDate", newValue);
      },
      immediate: true // 立即调用处理函数
    },
    // "form.item.isSpecializedSpecialEnterprises"(newVal, oldVal) {
    //   this.toggleDateElement("specializedSpecialEnterprisesDate");
    // },
	"form.item.isTechSme": {
      handler(newValue) {
		this.toggleDateElement("techSmeDate", newValue);
      },
      immediate: true // 立即调用处理函数
    },
    // "form.item.isTechSme"(newVal, oldVal) {
    //   this.toggleDateElement("techSmeDate");
    // },
	"form.item.isLittleGiant": {
      handler(newValue) {
		this.toggleDateElement("littleGiantDate", newValue);
      },
      immediate: true // 立即调用处理函数
    },
    // "form.item.isLittleGiant"(newVal, oldVal) {
    //   this.toggleDateElement("littleGiantDate");
    // },
	"form.item.isGazelle": {
      handler(newValue) {
		this.toggleDateElement("gazelleDate", newValue);
      },
      immediate: true // 立即调用处理函数
    },
    // "form.item.isGazelle"(newVal, oldVal) {
    //   this.toggleDateElement("gazelleDate");
    // },
  },
  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) {
      const elements = document.getElementsByClassName(targetEleClass);
      if (elements.length) {
        const element = elements[0];
		// console.log('值改变了，日期切换', element.classList,element.classList.contains("isHide"))
        // if (element.classList.contains("isHide")) {
        //   element.classList.remove("isHide"); // 移除 'hidden' 类
        // } else {
        //   element.classList.add("isHide");
        // }
		flag ? element.classList.remove("isHide") : 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>
.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>
