<template>
    <div>
      <el-card >
        <div class="card" >
          <div class="card-item">
          <div class="item-title">我的运输任务</div>
          <div class="item-subtitle" style="font-size: 30px">{{ myTransportTasks }}个任务</div>
          </div>
          <div class="card-item">
            <div class="item-title">在途车辆数</div>
            <div class="item-subtitle" style="font-size: 30px">{{ inTransitVehicles }}辆</div>
          </div>
          <div class="card-item">
            <div class="item-title">本周完成任务车数</div>
            <div class="item-subtitle" style="font-size: 30px">{{ completedTasksThisWeek }}个任务</div>
          </div>

        </div>
      </el-card>
      <el-card>
        <div class="card-content">
          <div class="header">
            <span class="title"></span>
            <div class="tabs-and-search">
              <div class="tabs">
                <el-radio-group v-model="radio2" @change="handleRadioChange">
                  <el-radio-button label="全部" value="全部" />
                  <el-radio-button label="进行中" value="进行中" />
                  <el-radio-button label="已结束" value="已结束" />
                </el-radio-group>
              </div>
              <el-form>
                <el-form-item label="招标名称" style="margin-bottom: 5px;" prop="contrNo">
                  <el-input class="search-input" v-model="query.tenderName" placeholder="请输入招标名称" clearable>
                    <template #suffix>
                      <el-icon class="search-icon" @click="search"><Search /></el-icon>
                    </template>
                  </el-input>
                </el-form-item>
              </el-form>

            </div>
          </div>
        </div>
      </el-card>

        <el-card :body-style="cardBodyStyle">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="公开招标大厅" name="zb">
            <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="tenderName" label="招标名称" width="200"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="true" prop="tranMaterial" label="运输物资" width="180"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="收发货地" width="250" header-align="center" align="center" show-overflow-tooltip>
                        <template #default="scope">
                        {{ scope.row.origin}} -> {{ scope.row.receipt }}
                      </template>
                         </el-table-column>
                        <el-table-column v-if="true" prop="traffic" label="运输量" width="100"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column v-if="true" prop="bidDate" label="开标日期" width="200"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>

                        <el-table-column v-if="true" prop="tenderRequest" label="要求" width="300"
                                         header-align="center" align="center"
                                         show-overflow-tooltip>
                        </el-table-column>
                       <el-table-column v-if="true" prop="quoteAmount" label="报价" width="100"
                               header-align="center" align="center"
                               show-overflow-tooltip>
                        </el-table-column>
              <el-table-column
                  prop="bidManner"
                  label="招标方式"
                  width="100"
                  header-align="center"
                  align="center"
                  show-overflow-tooltip>
                <template #default="scope">
                  {{ getBidMannerText(scope.row.bidManner) }}
                </template>
        </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.quoteAmount,scope.row.state)">
                          {{ scope.row.quoteAmount ? '重新报价' : '报价' }}

                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            </el-tab-pane>
<!--            <el-tab-pane label="我的邀标" name="yb">
              <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="tenderName" label="招标名称" width="200"
                                 header-align="center" align="center"
                                 show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="tranMaterial" label="运输物资" width="180"
                                 header-align="center" align="center"
                                 show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="收发货地" width="250" header-align="center" align="center" show-overflow-tooltip>
                  <template #default="scope">
                    {{ scope.row.origin}} -> {{ scope.row.receipt }}
                  </template>
                </el-table-column>
                <el-table-column v-if="true" prop="traffic" label="运输量" width="100"
                                 header-align="center" align="center"
                                 show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="bidDate" label="开标日期" width="200"
                                 header-align="center" align="center"
                                 show-overflow-tooltip>
                </el-table-column>

                <el-table-column v-if="true" prop="tenderRequest" label="要求" width="300"
                                 header-align="center" align="center"
                                 show-overflow-tooltip>
                </el-table-column>
                <el-table-column v-if="true" prop="quoteAmount" label="报价" width="100"
                                 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-tab-pane>-->

          </el-tabs>
        </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 title="详细" v-model="dialogVisible" width="1250px"
                   top="5vh"  @open="openDialog">
          <el-card :body-style="cardBodyStyle">
            <el-form :model="form" label-width="200px" label-position="right" inline ref="ruleFormRef" :rules="rules">
                <el-form-item label="物流招标号"  >
                    <el-input v-model="form.tmsTender" :disabled="true" clearable style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="合同号"  >
                    <el-input v-model="form.releContract" :disabled="true" clearable style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="计划号"  >
                    <el-input v-model="form.relePlan" :disabled="true" clearable style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="运输物资"  >
                    <el-input v-model="form.tranMaterial" :disabled="true" clearable style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="货源地"  >
                    <el-input v-model="form.origin" :disabled="true" clearable style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="收货地"  >
                    <el-input v-model="form.receipt"  :disabled="true" clearable style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="接货人"  >
                    <el-input v-model="form.rece" :disabled="true" clearable style="width: 200px"></el-input>
                </el-form-item>

              <el-form-item label="接货人电话"  >
                <el-input v-model="form.receNumber" :disabled="true" clearable style="width: 200px"></el-input>
              </el-form-item>
            </el-form>
            <Attachment ref="AttachmentRefTender" :fId="fId1" :upload-button="false"></Attachment>>
            </el-card>
        </el-dialog>

      <el-dialog :close-on-click-modal="false" draggable title="物流运输招标信息" v-model="dialogVisible1" width="1000px"
                 top="18vh" @close="handleClose">
        <el-card :body-style="cardBodyStyle" class="diaClass90">
          <template #header>
          <el-descriptions title="" :column="3">
            <el-descriptions-item align="left" label="招标号:">{{ form.tmsTender }}</el-descriptions-item>
            <el-descriptions-item align="left" label="招标描述:">{{ form.tenderRequest }}</el-descriptions-item>
            <el-descriptions-item align="left" label="计划号:">{{ form.relePlan }}</el-descriptions-item>
            <el-descriptions-item align="left" label="物料:">{{ form.tranMaterial }}</el-descriptions-item>

            <el-descriptions-item align="left" label="路线:">{{ form.origin}} -> {{ form.receipt }}</el-descriptions-item>
            <el-descriptions-item align="left" label="开始时间:">{{ form.bidDate }}</el-descriptions-item>
            <el-descriptions-item align="left" label="结束时间:">{{ form.endBidDate }}</el-descriptions-item>
          </el-descriptions>
          </template>
          <Attachment ref="AttachmentRefBidding" :fId="fId"></Attachment>
          <el-form :model="form" style="display: flex; align-items: center;" inline ref="ruleFormRef" :rules="rules">

            <el-form-item label="报出价格" style="margin-right: 20px;" prop="quoteAmount">
              <el-input v-model="form.quoteAmount" placeholder="" clearable>
                <template #suffix>
                  <span style="color: red;">人民币 元</span>
                </template>
              </el-input>
            </el-form-item>
            <div style="margin-left:20px;margin-top:-15px;">
              <el-button type="primary"   @click="handleSave(ruleFormRef)">确定</el-button>
            </div>
          </el-form>
        </el-card>

      </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()
      getNumberCars()
    })


    const activeName = ref('zb')

    const handleClick = (tab, event) => {
      currentPage.value = 1;
      activeName.value = tab.props.name;
      handleRadioChange(radio2.value);
      console.log('Active tab:', tab.props.name);
    }
    const handleClose = () => {
      form.value.quoteAmount = ''; // 清空 quoteAmount 字段
    };
    const handleEdit = (row) => {
      dialogVisible.value = true
      form.value = row
      fId1.value=row.relePlan
    }
    const fId1 = ref('a');
    const fId = ref('a');
    const AttachmentRefBidding  = ref(null)
    const handleEdit1 = (row) => {
      dialogVisible1.value = true
      form.value = row

      fId.value=row.tmsTender+xinxi.value.ftranscode;
      console.log(fId)

    }
    const getBidMannerText = (bidManner) => {
      return bidManner === '0' ? '公开' : '邀请';
    };
    const AttachmentRefTender = ref(null)

    /**
     *   查询
     */
    const isDisabled = (quoteAmount,state) => {
      if (quoteAmount || state === 2) {
        return true;
      }
      return false;
    };
    //点击登录拿到承运商编码，
    const currentTime = new Date().toISOString();
const handleRadioChange = (value) => {
          console.log('选中的值:', value);
          // 在这里处理点击事件的逻辑
          switch (value) {
            case '全部':
              handleAll(value,currentTime);
              break;
            case '进行中':
              handleOngoing(value,currentTime);
              break;
            case '已结束':
             handleEnded(value,currentTime);
              break;
            default:
              break;
          }
        }
    //点击确定

    const xinxi =ref({
      ftransname: localStorage.getItem('ftransname'),
      ftranscode: localStorage.getItem('ftranscode')
    })


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


    const handleSearch = () => {

      currentPage.value = 1
      handleRadioChange(radio2.value)
    }
    const search = () => {
      handleRadioChange(radio2.value)

    }
    const handleAll = (status) => {
      getTableData({ status: '全部', currentTime: new Date().toISOString() });
    };

    const handleOngoing = (status) => {
      getTableData({ status: '进行中', currentTime: new Date().toISOString() });
    };

    const handleEnded = (status) => {
      getTableData({ status: '已结束', currentTime: new Date().toISOString() });
    };
    const getTableData = ({ status, currentTime}) => {

      console.log('status:', status);
      console.log('currentTime:', currentTime);

    query.value.carrName=xinxi.value.ftransname;
    query.value.carrNum=xinxi.value.ftranscode;
      const url = 'tms/Tender/queryStatus';
      console.log(activeName.value)

      const param = {
        page: currentPage.value,
        rows: pageSize.value,
        activeName: activeName.value,
        query: JSON.stringify({ status, currentTime }),
        extraQuery: 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
              console.log(tableData.value)
            } else {
              ElMessage.error('操作失败！' + response.data.msg)
            }
          })

    }
    const  myTransportTasks=ref(0)
    const  inTransitVehicles=ref(0)
    const  completedTasksThisWeek=ref(0)
    const getNumberCars = () => {
       var url = 'tms/Tender/queryByNumberCars';
       var param = {

           params: JSON.stringify(xinxi.value)
       }
       proxy.$axios.get(url, param).then(response => {
            if (response.data.code == '0') {
              myTransportTasks.value = response.data.data.myTransportTasks
              inTransitVehicles.value = response.data.data.inTransitVehicles
              completedTasksThisWeek.value = response.data.data.completedTasksThisWeek
            } else {
                ElMessage.error('操作失败！' + response.data.msg)
            }
        })
    }
    /**
     *   查询
     */

    /**
     * 分页
     */
    const currentPage = ref(1)
    const totalRows = ref(0)
    const pageSizes = ref([5, 10, 20, 30, 40])
    const pageSize = ref(5)
    const handleSizeChange = (val) => {
        pageSize.value = val
        getTableData()
    }

    const handleCurrentChange = (page) => {

      currentPage.value = page;
      const status = radio2.value; // 获取当前选中的状态
      const currentTime = new Date().toISOString();
      console.log('status:', status);
      console.log('currentTime:', currentTime);
      getTableData({ status, currentTime });
    };
    /**
     * 分页
     */


    /**
     * 新增
     */

    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:'',
      quateFrequency:''


    })
    const ruleFormRef = ref()
    const rules = reactive({
      quoteAmount: [{
        required: true,
        message: '请输入竞价金额',
        trigger: 'change'| 'blur'
      }]

    })
    const handleAdd = () => {
        form.value = {
            ftranscode: '', 
            ftransname: '', 
            ftransdirector: '', 
            ftransdirectorphone: '', 
            ftransdescribe: '', 
            ftransroute: '', 
            frecommendperson: '', 
            fapplystoragetime: '', 
            fstoragetime: '', 
            fstorageperson: '', 
            fother: ''
        }
        dialogVisible.value = true
    }
    /**
     * 新增
     */


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

    const openDialog=()=>{
    }






    const handleSave = (ruleFormRef) => {

      form.value.carrName=xinxi.value.ftransname;
      form.value.carrNum=xinxi.value.ftranscode;

      form.value.bidState='0'
        ruleFormRef.validate((valid, fields) => {
            if (valid) {
                var url = 'tms/BidActive/save'
                var param = {
                    json: JSON.stringify(form.value),
                }
                proxy.$axios.post(url, param).then(response => {
                    if (response.data.code == 0) {
                        form.value = response.data.data
                        ElMessage({
                            message: '保存成功',
                            type: 'success',
                        })
                      AttachmentRefBidding.value.upload()
                      handleRadioChange(radio2.value);
                        dialogVisible1.value = false
                    } else {
                        // ElMessage.error('操作失败！' + response.data.msg)
                        ElMessage({
                            message: '操作失败' + response.data.msg,
                            type: 'error'
                        })
                    }
                })

            } else {
                console.log('error submit!', fields)
            }
        })
    }

    const radio2 =ref("全部")


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



    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; /* 固定宽度，可以根据需要调整 */
}
</style>