<template>
  <view>
    <div class="tabs">
      <div class="item" :class="{ active: active == 1 }" @click="handleTab(1)">派车分配</div>
      <div class="item" :class="{ active: active == 2 }" @click="handleTab(2)">派车审核</div>
    </div>
    <!-- 搜索 -->
    <div class="search flex align-center">
      <div v-if="active == 2" style="width: 30%">
        <div class="search-item" @click="showPicker = true">
          {{ checkStatus || '审核状态' }}
          <u-icon name="arrow-down"></u-icon>
        </div>
      </div>
      <u-input
        v-model="keyWord"
        placeholder="请输入搜索工程或计划"
        suffixIcon="search"
        suffixIconStyle="color: #666"
        shape="circle"
        @blur="handleSearch"
      ></u-input>
    </div>
    <!-- 列表 -->
    <div class="list">
      <div class="list-cont" v-for="(item, index) in tableList" :key="index" @click="handleDetail(item)">
        <u-row justify="space-between" customStyle="margin-bottom: 10px; padding: 0 15px;">
          <u-col span="6">
            <div>{{ item.code }}</div>
          </u-col>
          <u-col span="6" v-if="active == 1">
            <div style="display: flex; justify-content: flex-end">
              <u-tag :text="item.status" type="success" v-if="item.supId && item.status == '已派车'"></u-tag>
              <u-tag :text="item.status" type="warning" v-else></u-tag>
            </div>
          </u-col>
        </u-row>
        <u-line style="margin-bottom: 5px"></u-line>
        <div class="list-item">
          <span>工程名称：</span>
          <span>{{ item.proName }}</span>
        </div>
        <div class="list-item df-item">
          <div>
            <span>计划类型：</span>
            <span>{{ item.typeName }}</span>
          </div>
          <div>
            <u-tag v-if="active == 1 && !item.supId" type="primary" text="派车分配" @click="openModal(item)"></u-tag>
            <u-tag
              v-else-if="active == 2 && item.status == 0"
              type="warning"
              text="审核"
              @click="openModal(item)"
            ></u-tag>
            <u-tag :text="item.statusName" type="success" v-else-if="active == 2 && item.status == 1"></u-tag>
            <u-tag :text="item.statusName" type="error" v-else-if="active == 2"></u-tag>
          </div>
        </div>
        <div class="list-item">
          <span>供 应 商：</span>
          <span>{{ item.supName }}</span>
        </div>
      </div>
      <!-- 空状态 -->
      <u-empty v-if="tableList.length == 0" mode="data"></u-empty>
    </div>

    <!-- 弹框 -->
    <u-modal :show="showModal" :title="modalTitle" showCancelButton @cancel="showModal = false" @confirm="submit">
      <view class="slot-content">
        <div v-if="active == 1">
          <u-radio-group v-model="supId" placement="column" @change="groupChange">
            <u-radio
              :customStyle="{ marginBottom: '8px' }"
              v-for="(item, index) in radioList"
              :key="index"
              :label="item.name"
              :name="item.id"
            ></u-radio>
          </u-radio-group>
        </div>
        <div v-else>
          <div class="item-wrap">
            <div class="item" :class="{ active: isPass }" @click="isPass = true">通过</div>
            <div class="item" :class="{ active: !isPass }" @click="isPass = false">不通过</div>
          </div>
          <u-textarea
            v-model="remark"
            placeholder="不通过必须填写审核不通过意见"
            :rows="5"
            maxlength="200"
            count
          ></u-textarea>
        </div>
      </view>
    </u-modal>

    <!-- 选择器 -->
    <u-picker
      v-if="showPicker"
      :show="showPicker"
      :columns="[columns]"
      keyName="label"
      @cancel="showPicker = false"
      @confirm="confirm"
    ></u-picker>

    <u-loadmore :status="status" line v-if="tableList.length > 10" />
  </view>
</template>

<script>
import { getPlanList, getAuditList, getContractSupList, addPlanSupInfo, dispatchAudit } from '@/api/carManage'

export default {
  data() {
    return {
      active: 1,
      showModal: false,
      modalTitle: '',
      readonly: false,
      keyWord: '',
      status: 'loadmore',
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableList: [],
      checkStatus: '', // 审核状态
      checkStatusId: '', // 审核状态id
      showPicker: false,
      columns: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '已审核',
          value: '1'
        },
        {
          label: '待审核',
          value: '0'
        }
      ],
      // 单选
      radioList: [],
      supId: '', // 供应商id
      supName: '', // 供应商名称
      contractId: '', // 合同id
      remark: '', // 审批意见
      isPass: true, // 是否通过
      row: {}
    }
  },
  computed: {
    justifyContent() {
      return this.active == 1 ? 'flex-start' : 'center'
    }
  },
  onShow() {
    this.getList()
  },
  methods: {
    handleTab(index) {
      this.active = index
      this.pageNum = 1
      this.pageSize = 10
      this.tableList = []
      this.total = 0
      this.checkStatus = ''
      this.checkStatusId = ''
      this.keyWord = ''
      this.getList()
    },
    handleSearch() {
      console.log('搜索', this.keyWord.trim())
      this.pageSize = 10
      this.getList()
    },
    async getList() {
      try {
        const params = {
          encryptedData: JSON.stringify({
            keyWord: this.keyWord.trim(),
            status: this.checkStatusId
          }),
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
        console.log('🚀 ~ getList ~ params', params)
        try {
          let res = null
          if (this.active == 1) {
            // 派车分配-列表
            res = await getPlanList(params)
          } else {
            // 派车审核-列表
            res = await getAuditList(params)
          }
          console.log('🚀 ~ getList ~ res', res)
          this.tableList = res.list
          this.total = res.total
        } catch (error) {
          console.log('🚀 ~ getList ~ error', error)
        }
      } catch (error) {
        console.log('🚀 ~ getList ~ error', error)
      }
    },
    onReachBottom() {
      console.log('🚀 ~ onReachBottom ~ ')
      if (this.total < 10 || this.total == this.tableList.length) {
        this.status = 'nomore'
        return
      }
      this.status = 'loading'
      setTimeout(() => {
        this.pageSize += 10
        this.getList()
        if (this.tableList.length != this.total) this.status = 'loadmore'
        else this.status = 'nomore'
      }, 500)
      console.log('加载..', this.pageSize)
    },
    // 打开弹窗
    openModal(item) {
      this.row = item
      this.showModal = true
      if (this.active == 1) {
        this.getContractSupList(item)
        this.modalTitle = '指定派车供应商'
        this.supId = ''
        this.supName = ''
      } else {
        this.modalTitle = '派车审核'
        this.isPass = true
        this.remark = ''
      }
    },
    // 获取供应商列表
    async getContractSupList(item) {
      console.log('🚀 ~ 供应商-列表 ~ item:', item)
      const params = {
        encryptedData: JSON.stringify({ type: item.type })
      }
      try {
        const res = await getContractSupList(params)
        console.log('🚀 ~ getContractSupList ~ res', res)
        this.radioList = res.data
      } catch (error) {
        console.log('🚀 ~ getContractSupList ~ error', error)
      }
    },
    confirm(e) {
      console.log('🚀 ~ confirm ~ e', e)
      this.checkStatus = e.value[0].label
      this.checkStatusId = e.value[0].value
      this.getList()
      this.showPicker = false
    },
    groupChange() {
      console.log('🚀 ~ supId', this.supId)
      this.supName = this.radioList.find(item => item.id == this.supId).name
      this.contractId = this.radioList.find(item => item.id == this.supId).contractId
      console.log('🚀 ~ supName', this.supName, this.contractId)
    },
    // 查看详情
    handleDetail(item) {
      console.log('查看详情', item)
      let isPlan = false
      let isAudit = false
      let isDetail = false
      let active = null
      if (this.active == 1 && !item.supId) {
        isPlan = true
        active = 1
      } else if (this.active == 2 && item.status == 0) {
        isAudit = true
        active = 2
      } else {
        isDetail = true
        active = 1
      }
      const params = {
        ...item,
        isPlan,
        isAudit,
        isDetail,
        active
      }
      uni.navigateTo({
        url: `/pages/sendACarSystem/details?params=${JSON.stringify(params)}`
      })
    },
    // 提交-派车分配/审核
    submit() {
      console.log('提交')
      if (this.active == 1) {
        console.log('派车分配', this.supId)
        if (!this.supId) {
          uni.showToast({
            title: '请选择派车供应商',
            icon: 'none'
          })
          return
        }
        this.addPlanSupInfo()
      } else {
        console.log('派车审核', this.isPass, this.remark)
        if (!this.isPass && !this.remark) {
          uni.showToast({
            title: '请填写审核不通过意见',
            icon: 'none'
          })
          return
        }
        this.dispatchAudit()
      }
      this.showModal = false
      this.getList()
    },
    // 确认分配供应商
    async addPlanSupInfo() {
      const params = {
        encryptedData: JSON.stringify({
          type: this.row.type,
          id: this.row.planId,
          supId: this.supId,
          supName: this.supName,
          contractId: this.contractId
        })
      }
      try {
        const res = await addPlanSupInfo(params)
        console.log('🚀 ~ addPlanSupInfo ~ res', res)
        uni.showToast({
          title: '分配成功',
          icon: 'success'
        })
      } catch (error) {
        console.log('🚀 ~ addPlanSupInfo ~ error', error)
      }
    },
    // 派车审核
    async dispatchAudit() {
      const params = {
        encryptedData: JSON.stringify({
          id: this.row.outId,
          planId: this.row.planId,
          status: this.isPass ? 1 : 2,
          remark: this.remark
        })
      }
      try {
        const res = await dispatchAudit(params)
        console.log('🚀 ~ dispatchAudit ~ res', res)
        uni.showToast({
          title: '审核成功',
          icon: 'success'
        })
      } catch (error) {
        console.log('🚀 ~ dispatchAudit ~ error', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #f8f8f8;
}
.search {
  margin: 15px;
  display: flex;
  .search-item {
    margin-right: 10px;
    border: 1px solid #e8e8e8;
    padding: 7px 10px;
    border-radius: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.list {
  height: calc(100vh - 112px);
  overflow-y: auto;
}
.list-cont {
  margin: 15px;
  margin-top: 0;
  padding: 15px 0;
  margin-bottom: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);

  .list-item {
    padding: 5px 15px;
  }

  .df-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.tabs {
  width: 100%;
  height: 45px;
  background-color: #fff;
  z-index: 99;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  .item {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    color: #666;
    font-size: 16px;
    font-weight: 500;
    border-bottom: 2px solid #dcdcdc; // 添加透明边框
    transition: color 0.3s ease, border-bottom 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;

    // 激活状态
    &.active {
      color: $u-primary;
      border-bottom: 2px solid $u-primary;
      background-color: #f8f8f8;
    }
  }
}
.slot-content {
  width: 100%;
  height: 100%;
  .item-wrap {
    margin-bottom: 15px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .item {
      width: 45%;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #e8e8e8;
      border-radius: 30px;
      background-color: #f8f8f8;
      color: #666;
      font-size: 16px;
      font-weight: 500;
      transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;

      &.active {
        color: $u-primary;
        background-color: #f8f8f8;
        border: 1px solid $u-primary;
      }
    }
  }
}
</style>
