<template>
  <div class="edit-add-detail">
    <div class="crumbs">
      <Breadcrumb
        :breadcrumbOpt="breadcrumbOpt"
        svg-name="#icon-roleEdit"
        @breadcrumb-click="handleClose"
      />
    </div>
    <div class="common-page-shadow">
      <el-row class="common-table-container flex searchPanel">
        <el-col :span="24" class="common-table-wrapper">
          <div class="common-btn-group">
            <import-file
              :importData="importData"
              @load="load"
              
            ></import-file>
          </div>
          <!-- LJ：表格高度自适应需配合样式  btn-pagenation 有按钮有分页  btngroup只有按钮  pagenation只有分页 -->
          <div class="common-table-content btn-pagenation">
            <el-table
              :border="true"
              stripe
              fit
              size="mini"
              v-loading="tableLoading"
              ref="multipleSelection"
              :data="tableData"
              height="100%"
              @cell-mouse-enter="handleCellEnter"
              @cell-mouse-leave="handleCellLeave"
            >
              <el-table-column
                type="index"
                width="55"
                align="center"
                label="序号"
              >
              </el-table-column>
              <el-table-column
                prop="date"
                min-width="10%"
                label="物料名称"
                align="center"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="name"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="数量"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="companyName"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="单位"
                resizable
              >
              </el-table-column>
              <el-table-column
                prop="upset"
                show-overflow-tooltip
                min-width="10%"
                align="center"
                label="拍卖底价"
                resizable
              >
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                min-width="15%"
                align="center"
                label="我的报价"
                resizable
              >
                <template slot-scope="scope">
                  <el-input-number
                    v-if="scope.row.isEdit"
                    size="small"
                    v-model="scope.row.quote"
                    :step="1"
                  ></el-input-number>
                  <!-- <el-input
                    size="small"
                    v-if="scope.row.isEdit"
                    class="item"
                    v-model="scope.row.quote"
                    placeholder="请输入内容"
                  ></el-input> -->
                  <div v-else class="txt">{{ scope.row.quote }}</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="common-pagenation">
            <div class="common-total">
              <div class="text">
                预估总额: <span>￥{{ totalValue }}</span>
              </div>
              <div class="text">
                报价总额: <span>￥{{ totalValue }}</span>
              </div>
              <div class="btn">
                <el-button type="primary" size="small" @click="open(row)"
                  >保存报价</el-button
                >
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" class="common-table-quote"
          ><div class="quote-content">
            <div class="rows">
              <div class="rows-left">
                <div class="rows-hr"></div>
              </div>
              <div class="rows-title">
                <div class="text-overflow">报价截止时间</div>
              </div>
            </div>
            <div class="auction">
              <div id="box">
                <div id="time">
                  <!-- v-if="auctionStatus == 1" -->
                  <!-- :class="dateTime.days < 0 ? 'red' : ''" -->
                  <strong>
                    <span id="day"> {{ 2 }}天 </span>
                  </strong>
                  <strong>
                    <span id="hour"> {{ 3 }}时 </span>
                  </strong>
                  <strong>
                    <span id="minute"> {{ 4 }}分 </span>
                  </strong>
                  <strong>
                    <span id="second"> {{ 44 }}秒 </span>
                  </strong>
                </div>
              </div>
            </div>
            <div class="rows">
              <div class="rows-left">
                <div class="rows-hr"></div>
              </div>
              <div class="rows-title">
                <div class="text-overflow">
                  <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane
                      v-for="(item, index) in activeList"
                      :key="index"
                      :name="item.value"
                      :label="item.name"
                    >
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </div>
            </div>
            <div class="content" v-if="activeName==0">
              <el-table
                class="down"
                :data="dataList"
                size="mini"
                border
                stripe
                style="width: 100%;margin-top: 20px;"
              >
                <el-table-column
                  prop="attachName"
                  label="文件名称"
                ></el-table-column>
                <el-table-column width="150px" label="操作">
                  <template slot-scope="scope">
                    <el-button size="small" type="text">
                      <a
                        @click="
                          downloadFile(
                            scope.row.attachName,
                            scope.row.attachUrl
                          )
                        "
                        >查看</a
                      >
                    </el-button>
                    <el-button
                      size="small"
                      type="text"
                      @click="deleteHandle(scope.row.id)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="content" v-if="activeName==1">
              <el-table
                class="down"
                :data="addendumList"
                size="mini"
                border
                stripe
                style="width: 100%;margin-top: 20px;"
              >
                <el-table-column
                  prop="attachName"
                  label="文件名称"
                ></el-table-column>
                <el-table-column width="150px" label="操作">
                  <template slot-scope="scope">
                    <el-button size="small" type="text">
                      <a
                        @click="
                          downloadFile(
                            scope.row.attachName,
                            scope.row.attachUrl
                          )
                        "
                        >查看</a
                      >
                    </el-button>
                    <el-button
                      size="small"
                      type="text"
                      @click="deleteHandle(scope.row.id)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="btn">
              <el-upload
                style="display: inline-block"
                :action="importData.importUrl"
                :on-success="hadleUploadResult"
                :on-error="hadleUploadResult"
                :headers="uploadHeaders"
                :on-exceed="onExceed"
                accept=".xlsx,.xls"
                :before-upload="beforeUpload"
                :limit="1"
                :data="form"
                :auto-upload="false"
                ref="upload"
              >
                <el-button
                  size="small"
                  type="primary"
                  class="download-btn"
                  icon="el-icon-upload"
                  >添加文件</el-button
                >
              </el-upload>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb/index.vue'
export default {
  name: 'domesticDialog',
  components: {Breadcrumb},
  props: {
    editData: Object
  },
  data() {
    return {
      form: {},
      totalValue: 0,
      importData: {
        title: '导入报价',
        templateName: '导入报价导入模板.xls',
        downloadUrl: '/../fvue/static/excel/material.xlsx',
        importUrl: window.context.portal + '/biz/Gs/v1/importExcelData',
        showProject: true,
        header: '报价导入'
      },
      breadcrumbOpt: [{breadcrumbName: '招标采购'}, {breadcrumbName: '报价'}],
      tableData: [
        {
          id: 1,
          quote: 1000,
          upset: 1000,
          date: '2016-05-02',
          auctionStatus: 1,
          endStatus: 1,
          auctionStartDate: '2030-01-01 16:00.00',
          endCountdown: '2024-01-01 16:00.00',
          dateTime: {},
          endDateTime: {},
          name: '王小虎',
          isEdit: false,
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: 2,
          quote: 0,
          upset: 10000,
          date: '2016-05-04',
          auctionStatus: 1,
          endStatus: 2,
          auctionStartDate: '2030-01-01 16:00.00',
          name: '王小虎',
          dateTime: {},
          endDateTime: {},
          isEdit: false,
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          id: 3,
          quote: 0,
          upset: 100000,
          date: '2016-05-01',
          auctionStatus: 2,
          endStatus: 2,
          name: '王小虎',
          dateTime: {},
          endDateTime: {},
          isEdit: false,
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          id: 4,
          quote: 0,
          upset: 1000000,
          date: '2016-05-03',
          auctionStatus: 3,
          endStatus: 3,
          name: '王小虎',
          dateTime: {},
          endDateTime: {},
          isEdit: false,
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      dataList: [
        {attachName: '招标采购'},
        {attachName: '项目采购'},
        {attachName: '招标采购'},
        {attachName: '项目采购'},
      ],
      addendumList:[{attachName: '招标补遗'},
        {attachName: '项目采购'},
        {attachName: '招标采购'},
        {attachName: '项目采购'},],
      quoteForm: {},
      activeName:'0',
      activeList:[{value:'0',name:'招标文件'},{value:'1',name:'澄清提问'}],
      tableLoading: false,
      searchForm: {
        num: 1,
        num1: 1
      }, // 顶部搜索对象
      params: {
        pageBean: {
          page: 1,
          pageSize: 20,
          total: 0
        }
      }
    }
  },
  created() {
    this.addModifyBtn()
    this.totalChange()
  },
  mounted() {
    this.tableData.forEach(ele => {
      ele.dateTime = {
        dd: '**',
        hh: '**',
        mm: '**',
        ss: '**'
      }
      this.countDownMethod(ele)
    })
  },
  computed: {
    uploadHeaders: function() {
      return {
        Authorization:
          this.$store.state.login.currentUser &&
          'Bearer ' + this.$store.state.login.currentUser.token
      }
    }
  },
  methods: {
    handleClick(){

    },
    //报价总额
    totalChange() {
      this.totalValue = 0
      this.tableData.forEach(item => {
        this.totalValue += item.quote
      })
    },
    //删除文件
    deleteHandle() {},
    //查看文件
    downloadFile() {},
    //文件上传
    hadleUploadResult(response) {
      this.fullscreenLoading = false
      if (response.state) {
        this.$message.success(response.message)
        this.dialogImportVisible = false
        this.$emit('load', response.value)
      } else {
        this.$message.error(response.message)
      }
    },
    onExceed() {
      this.$message.warning('只能选择一个Excel文件!')
    },
    beforeUpload(file) {
      this.fileInfo = file
      if (!file.name.endsWith('.xlsx') && !file.name.endsWith('.xls')) {
        this.$message.warning('只能导入Excel文件!')
        return false
      }
      this.fullscreenLoading = true
    },
    /** 鼠标移入cell */
    handleCellEnter(row, column, cell, event) {
      row.isEdit = true
    },
    /** 鼠标移出cell */
    handleCellLeave(row, column, cell, event) {
      row.isEdit = false
      this.totalChange()
    },
    // 倒计时定时器
    countDownMethod(row) {
      row.countDown = setInterval(() => {
        const date = new Date(row.auctionStartDate) - new Date()
        if (date > 0) {
          row.dateTime = this.formatDate(date)
          this.tableData = [...this.tableData]
        } else {
          clearInterval(row.countDown)
        }
      }, 1000)
      row.endDown = setInterval(() => {
        const endDate = new Date(row.endCountdown) - new Date()
        if (endDate > 0) {
          row.endDateTime = this.formatDate(endDate)
          this.tableData = [...this.tableData]
        } else {
          clearInterval(row.endDown)
        }
      }, 1000)
    },
    formatDate(time) {
      const date = new Date(time)
      let days = this.addZero(Math.floor(time / 1000 / 60 / 60 / 24)) //天
      let hours = this.addZero(Math.floor((time / 1000 / 60 / 60) % 24)) //时
      let minutes = this.addZero(Math.floor((time / 1000 / 60) % 60)) //分
      let seconds = this.addZero(Math.floor((time / 1000) % 60)) //秒
      const dd = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      const hh = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      const mm =
        date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      const ss =
        date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return {
        days,
        hours,
        minutes,
        seconds
      }
    },
    addZero(d) {
      return parseInt(d) < 10 ? '0' + d : d
    },
    load() {
      // this.loadData()
    },
    //获取列表
    addModifyBtn() {
      console.log(this.$route.query.recordData)
    },
    // 关闭//面包屑点击
    handleClose() {
      this.$router.push({
        name: 'quotesMy',
        params: {
          tabsActiveName: 'TenderProcurement',
          pageBean: this.$route.query.pageBean
        }
      })
    },
    //重置
    clearSearchForm() {},
    // 顶部搜索
    handleSearch(searchForm) {
      debugger
      let obj = searchForm
      console.log(obj)
      let querys = []
      for (let i in obj) {
        if (obj[i]) {
          querys.push({
            group: 'main',
            operation:
              i == 'name' || i == 'code' || i == 'companyName'
                ? 'LIKE'
                : 'EQUAL',
            parentGroup: '',
            property: i,
            relation: 'AND',
            value: obj[i]
          })
        }
      }
      console.log(querys, 'querys')
      this.params.querys = querys
      console.log(this.params, 'params')
      this.loadData(this.params)
    }
  }
}
</script>

<style lang="scss" scoped>
.common-page-shadow {
  width: 100%;
  height: calc(100% - 50px);
  box-sizing: border-box;
  .common-search-container {
    height: 80px;
    div {
      display: flex;
      align-items: center;
    }
  }
  .common-table-container {
    height: calc(100% - 20px);
    .common-table-quote {
      height: 100%;
      padding: 26px 20px 30px 20px;
      .quote-content {
        border: 1px solid #eee;
        border-radius: 10px;
        height: 100%;
        padding: 0 20px;
        position: relative;
        .content {
          height: calc(100% - 240px);
          overflow: auto;
        }
        .btn {
          width: 100%;
          position: absolute;
          bottom: 16px;
          display: flex;
          justify-content: center;
        }
      }
    }
  }
}

.rows {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 16px;
  padding: 10px 0;
  .rows-left {
    margin-right: 10px;
    .rows-hr {
      width: 3px;
      height: 18px;
      background-color: #0e6eff;
      border-radius: 2px;
    }
  }
  .rows-title {
    .text-overflow {
      width: 100%;
      font-size: 16px;
    }
  }
}
</style>
