<template>
  <el-skeleton :rows="10" animated v-if="showSkeleton" />
  <div v-if="!showSkeleton">
    <el-card >
        <el-form :inline="true" style="display: flex; align-items: center;">
          <el-form-item label="物流招标号" style="margin-right: 20px;" prop="tmsIndicate">
            <el-input v-model="query.tmsTender" placeholder="请输入物流招标号" clearable></el-input>
          </el-form-item>
          <el-form-item label="招标名称" style="margin-right: 20px;" prop="tradePartnerName">
            <el-input v-model="query.tenderName" placeholder="请输入招标名称" clearable></el-input>
          </el-form-item>
          <div style="margin-left:20px;margin-top:-15px;">
            <el-button type="primary"   @click="dwQuery">查询</el-button>
          </div>

        </el-form>
      </el-card>

        <el-card :body-style="cardBodyStyle">

            <el-table :data="tableData" border highlight-current-row  @selection-change="handleSelectionChange">
                <el-table-column type="selection" fixed></el-table-column>
                <el-table-column type="index" label="序号" align="center" width="60">
                    <template #default="scope">
                        <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
                    </template>
                </el-table-column>


                        <el-table-column v-if="true" prop="tmsTender" label="物流招标号" width="200"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="true" prop="tenderName" label="招标名称" width="180"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>

              <el-table-column v-if="true" prop="bidCarrNum" label="中标承运商编号" width="180"
                               header-align="center" align="center"
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column v-if="true" prop="bidCarr" label="中标承运商" width="180"
                               header-align="center" align="center"
                               show-overflow-tooltip>
              </el-table-column>
              <el-table-column v-if="true" prop="bidPrice" label="中标价格" width="180"
                               header-align="center" align="center"
                               show-overflow-tooltip>
              </el-table-column>
                <el-table-column label="操作" header-align="center" align="center" width="200px" fixed="right">
                    <template #default="scope">

                      <el-button plain type="warning" @click="handleEdit(scope.row)">选标</el-button>
<!--                        <el-button plain type="danger" @click="handleEdit1(scope.row )"  :disabled="isDisabled(scope.row.endBidDate)">
                          {{ scope.row.quoteAmount ? '重新报价' : '报价' }}
                        </el-button>-->
                    </template>
                </el-table-column>
            </el-table>



        </el-card>
        <el-card :body-style="cardBodyStyle">
            <el-pagination  :current-page="currentPage"  :page-size="pageSize" :page-sizes="pageSizes"
                           :total="totalRows" background="background" layout="total, sizes, prev, pager, next, jumper"
                           @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </el-pagination>
        </el-card>



    <el-dialog
        :close-on-click-modal="false"
        draggable
        v-model="dialogVisible1"
        width="1000px"
        top="18vh">
      <template #title>
        <div class="dialog-title">
          选择中标承运商
          <span class="warning-text">请慎重选择</span>
        </div>
      </template>
        <el-card :body-style="cardBodyStyle">
          <template #header>
            <el-form :inline="true" style="display: flex; align-items: center;">
              <el-form-item label="承运商编码" style="margin-right: 20px;" prop="tmsIndicate">
                <el-input v-model="formBidActive.carrNum" placeholder="请输入承运商编码" clearable></el-input>
              </el-form-item>
              <el-form-item label="承运商名称" style="margin-right: 20px;" prop="tradePartnerName">
                <el-input v-model="formBidActive.carrName" placeholder="请输入承运商名称" clearable></el-input>
              </el-form-item>
              <div style="margin-left:20px;margin-top:-15px;">
                <el-button type="primary"   @click="cysQuery">查询</el-button>
              </div>
            </el-form>
          </template>
          <el-table
              :data="tableDataBidActive"
              border
              highlight-current-row
              @current-change="handleChange"
          >
            <el-table-column type="selection" fixed></el-table-column>
            <el-table-column type="index" label="序号" align="center" width="60">
              <template #default="scope">
                <span>{{ scope.$index + (currentPage1 - 1) * pageSize1 + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="true" prop="tmsTender" label="物流招标号" width="200"
                             header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="carrNum" label="承运商编码" width="180"
                             header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>

            <el-table-column v-if="true" prop="carrName" label="承运商名称" width="180"
                             header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="quoteAmount" label="报价金额" width="180"
                             header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="" label="报价文件" header-align="center" align="center" width="200px">
              <template #default="scope">
                <el-button type="text" @click="handlePreview(scope.row)">预览</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>

        <el-card :body-style="cardBodyStyle">
          <el-pagination  :current-page="currentPage1"  :page-size="pageSize1" :page-sizes="pageSizes1"
                          :total="totalRows1" background="background" layout="total, sizes, prev, pager, next, jumper"
                          @size-change="handleSizeChange1" @current-change="handleCurrentChange1">
          </el-pagination>
        </el-card>
        <div v-if="showAttachment">
          <span>
            报价文件
          </span>
          <el-button  type="text" @click="closeAttachment">关闭</el-button>
          <Attachment ref="AttachmentRefBidding" :fId="fId" :upload-button="false"></Attachment>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="success" @click="handleSave(ruleFormRef)">保存</el-button>
            <el-button type="danger" @click="handleCancelSave">取消</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
</template>

<script setup>
    import ButtonBar from '@/components/ButtonBar.vue'

    import {
        ref,
        reactive,
        onMounted,
        getCurrentInstance
    } from 'vue'

    const {
        proxy
    } = getCurrentInstance()

    import tools from '@/tools'
    import Attachment from "@/components/Attachment.vue";
    const cardBodyStyle = ref(tools.style.card)
    const inputStyle = ref(tools.style.input)

    onMounted(() => {
      handleSearch()

    })


    const activeName = ref('zb')

    const formBidActive = ref({
      TenderId:'',
      tmsTender:'',
      carrNum:'',
      carrName:''
    })




    const handleEdit = (row) => {
      currentPage1.value-1
      dialogVisible1.value = true
      showAttachment.value = false;
      fId.value=''
      formBidActive.value.tmsTender = row.tmsTender
      getTableBidActive()
    }
    const fId = ref('a');
    const AttachmentRefBidding  = ref(null)
    const showAttachment = ref(false);
    const handlePreview = (row) => {
      if (showAttachment.value) {
        // 如果已经显示预览，则关闭预览
        showAttachment.value = false;
      } else {
        // 否则显示预览
        showAttachment.value = true;
        fId.value = row.tmsTender + row.carrNum;
      }
    };
    const closeAttachment = () => {
      showAttachment.value = false;
      fId.value = ''; // 清空 fId
    };
    const dwQuery = () => {
      currentPage.value = 1
      getTableData()
    }

    const cysQuery = () => {
      currentPage1.value = 1
      getTableBidActive()
    }

    const query = ref({
      tenderName:'',
      carrName:'',
      carrNum:''
   })
   const tableData = ref([])

    const handleCancelSave = () => {
      dialogVisible1.value = false
    }

    /**
     *   查询
     */

    /**
     * 分页
     */
    const currentPage = ref(1)
    const totalRows = ref(0)
    const pageSizes = ref([5, 10, 20, 30, 40])
    const pageSize = ref(5)
    const currentPage1 = ref(1)
    const totalRows1 = ref(0)
    const pageSizes1 = ref([5, 10, 20, 30, 40])
    const pageSize1 = ref(5)
    const handleSizeChange = (val) => {
        pageSize.value = val
        getTableData()
    }
    const handleSizeChange1 = (val) => {
      pageSize1.value = val
      getTableBidActive()
    }
    const handleCurrentChange1 = (val) => {
      currentPage.value = val
      getTableBidActive()
    }
    const handleCurrentChange = (val) => {
      currentPage.value = val
      getTableData()
    }
    const currentRow = ref(null);

    const handleChange = (row)=>{
      currentRow.value=row;

    }
    /**
     * 新增
     */

    const dialogVisible1 = ref(false)
    const dialogVisible = ref(false)
    const form = ref({
      id:'',
      tmsIndicate: '',
      tradePartnerName: '',
      contrNo: '',
      itemNm: '',
      qty: '',
      fother: '',
      tenderName:'',
      tenderRequest:'',
      bidDate:'',
      endBidDate:'',
      rece:'',
      receNumber:'',
      state:'',
      bidManner:'',
      traffic:'',
      tranMaterial:'',
      relePlan:'',
      releContract:'',
      toPlace:'',
      receipt:'',
      origin:'',
      fromPlace:'',
      tmsTender:'',
      quoteAmount:'',
      carrNum:'',
      carrName:'',
      bidState:'',
      BidActiveId:'',
      activeFileId:'',



    })
    const ruleFormRef = ref()
    const rules = reactive({


    })


    const getTableData = () => {
      var url = 'tms/Tender/query'
      var param = {
        page: currentPage.value,
        rows: pageSize.value,
        params: JSON.stringify(query.value)
      }
      proxy.$axios.get(url, param).then(response => {
        if (response.data.code == '0') {
          tableData.value = response.data.data.records
          totalRows.value = response.data.data.total
        } else {
          ElMessage.error('操作失败！' + response.data.msg)
        }
      })
    }
    const tableDataBidActive = ref([])
    const getTableBidActive = () => {
      console.log(formBidActive.value)
      var url = 'tms/BidActive/query'
      var param = {
        page: currentPage1.value,
        rows: pageSize1.value,
        params: JSON.stringify(formBidActive.value)
      }
      proxy.$axios.get(url, param).then(response => {
        if (response.data.code == '0') {
          tableDataBidActive.value = response.data.data.records
          totalRows1.value = response.data.data.total
        } else {
          ElMessage.error('操作失败！' + response.data.msg)
        }
      })
    }
    const openDialog=()=>{
    }


    const handleSearch = () => {
      currentPage.value = 1
      getTableData()
    }



    const handleSave = () => {

      if (currentRow.value==null){
        ElMessage({
          message: '请选择一行数据',
          type: 'error'
        })
        return
      }
      var url = 'tms/BidActive/BidUpdate'
      var param = {
        json: JSON.stringify(currentRow.value),
      }
      proxy.$axios.post(url, param).then(response => {
        if (response.data.code == 0) {

          ElMessage({
            message: '保存成功',
            type: 'success',
          })
          getTableData()
          dialogVisible1.value = false

        } else {
          // ElMessage.error('操作失败！' + response.data.msg)
          ElMessage({
            message: '操作失败' + response.data.msg,
            type: 'error'
          })
        }
      })

    }



    /**
     * 保存、修改、删除
     */



    const handleEditBatch = () => {
        console.log('handleEditBatch')
        if (multipleSelection.value.length != 1) {
            ElMessage({
                type: 'warning',
                message: '请选择一条数据编辑!'
            })
            return
        }
        handleEdit(multipleSelection.value[0])
    }

    const handleUpload = () => {
        console.log('handleUpload')
    }

    const handleDownload = () => {
        console.log('handleDownload')
    }

    const handleImport = () => {
        console.log('handleImport')
    }

    const handleExport = () => {
        console.log('handleExport')
    }

</script>

<style scoped>
.card {
  display: flex;
  justify-content: space-between; /* 让子元素之间有空间 */
  align-items: center; /* 垂直居中对齐 */
  padding: 20px; /* 给卡片添加内边距 */


}

.card-item {
  flex: 1; /* 每个元素占据相等的空间 */
  text-align: center; /* 文本居中 */
  margin: 0 10px; /* 给左右添加一些间隔 */
  color: #666; /* 设置文本颜色为浅灰色 */
}
.card-content .header {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  justify-content: space-between; /* 元素之间留有空间 */
}

.card-content .title {
  flex: 1; /* 让标题尽可能占据更多空间 */
}

.card-content .tabs-and-search {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

.card-content .tabs {
  margin-right: 50px; /* 选项卡与搜索框之间的间距 */
}

.card-content .search-input {
  width: 200px; /* 固定宽度，可以根据需要调整 */
}
.dialog-title {
  display: flex;
  align-items: center;
  font-size: 25px;
}
.warning-text {
  color: red;
  font-size: 12px; /* 可以调整字体大小 */
  margin-left: 10px; /* 调整与标题之间的间距 */
}
</style>