<template>
  <div>
    <div class="search-container">
      <el-input
        v-model="queryParams.quotCustomerName"
        placeholder="请输入客户名称"
        class="search-input"
        clearable>
      </el-input>
      <el-select
        v-model="queryParams.quotApprovalStatus"
        placeholder="请选择审批状态"
        class="search-input"
        clearable
      >
        <el-option
          v-for="dict in dict.type.quot_approval_status"
          :key="dict.value"
          :label="dict.label"
          :value="dict.value"
        />
      </el-select>
      <el-input
        v-model="queryParams.quotProject"
        placeholder="请输入项目名称"
        class="search-input"
        clearable>
        <el-button slot="append" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button slot="append" icon="el-icon-plus" @click="handleAdd">新增</el-button>
      </el-input>

    </div>
    <div v-if="quoteList.length === 0">内容为空</div>
      <div v-for="(quote, index) in quoteList" :key="index">
        <div style="padding: 10px">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{quote.quotCode}}</span>
              <el-button style="float: right; padding: 3px; " type="text" @click="handleEdit(quote, 'edit')">编辑</el-button>
              <el-button style="float: right; padding: 3px; margin-right: 50px " type="text" @click="handleEdit(quote, 'view')">查看</el-button>

            </div>
            <div class="text item">
              <div v-if="false">订单号Id:{{quote.quotId}}</div>
              <div style="margin-bottom: 5px">客户:{{quote.quotCustomerName}}</div>
              <div style="margin-bottom: 5px">项目名称:{{quote.quotProject}}</div>
              <div style="margin-bottom: 5px">提交状态:{{quote.quotApprovalStatus === '0' ? '待提交' : (quote.quotApprovalStatus === '1' ? '协助中' :
                (quote.quotApprovalStatus === '2' ? '已完成' : '已驳回'))}}</div>
              <div style="margin-bottom: 5px">OA审批状态:{{quote.quotOAApprovalStatus === '0' ? '待提交' : (quote.quotOAApprovalStatus === '1' ? '协助中' :
                (quote.quotOAApprovalStatus === '2' ? '已完成' : '已驳回'))}}</div>
              <div style="margin-bottom: 5px">询价日期:{{formatDate(quote.quotInquiryDate)}}</div>
              <div style="margin-bottom: 5px">报价日期:{{formatDate(quote.quotQuotationDate)}}</div>
              <div >创建时间:{{quote.createTime}}</div>
            </div>
          </el-card>
        </div>
      </div>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="handleSearch"
      />

    </div>
</template>

<script>
import { getQuoteList} from "@/api/mobile/quoteMobile/quoteMobile";
import { listQuot } from "@/api/quot/quot";
export default {
  name: "index",
  dicts: ['quot_approval_status'],
  data() {
    return {
      loading: true,
      quoteList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        quotCode: null,
        quotCustomerName: null,
        quotProject: null,
        quotApprovalStatus: null,
      },
    };
  },
  computed: {
    noMore () {
      return this.quoteList.length >= this.total
    },
    disabled () {
      return this.loading || this.noMore
    }
  },
  created() {
    this.handleSearch();
  },
  mounted() {
  },
  methods: {
    handleSearch() {
      try {
        listQuot(this.queryParams).then(response => {
          this.quoteList = response.rows;
          this.queryParams.pageNum++;
          this.total = response.total;
        });
      } catch (error) {
        console.error(error);
      }
    },
    handleAdd() {
      this.$router.push('/quoteMobile/add');
    },
    handleEdit(quote, name) {
      const info = { quotId: quote.quotId, operate: name };
      console.log(info);
      this.$router.push({ path: '/quoteMobile/edit/edit', query: info });
      console.log(quote)
    },

    formatDate(dateString) {
      if (dateString !== undefined && dateString !== null) {
        const date = new Date(dateString);
        return date.toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: false,
          timeZone: 'Asia/Shanghai'
        });
      } else {
        return ''
      }

    }
  },

}
</script>

<style>
.search-container {
  padding: 5px 10px 0px 10px;
  justify-content: center;
  margin-bottom: 10px;
  margin-top: 10px;
}

.search-input {
  width: 100%;
  max-width: 600px;
  border-radius: 25px;
}

.box-card {
  margin-bottom: 0;
}

.loading,
.end-of-data {
  text-align: center;
  padding: 10px;
}

.quote-list {
  overflow-y: auto;
  height: 100vh; /* 设置高度以触发滚动 */
}
</style>
