<template>
  <div>
    <div v-if="!isShowDetail" class="app-container">
      <div class="screen-container">
        <el-form ref="screenForm" :model="screenForm" label-width="70px" size="small" label-position="left">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="订单号" prop="id">
                <el-input v-model="screenForm.id" placeholder="请输入订单号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="商品名称" prop="goodsName">
                <el-input v-model="screenForm.goodsName" placeholder="请输入商品名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="会员昵称" prop="userName">
                <el-input v-model="screenForm.userName" placeholder="请输入会员昵称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="手机号" prop="userMobile">
                <el-input v-model="screenForm.userMobile" placeholder="请输入手机号"></el-input>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="创建时间" prop="createDate" style="height: 33px">
                <el-date-picker
                  v-model="screenForm.createDate"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="支付时间" prop="payDate" style="height: 33px">
                <el-date-picker
                  v-model="screenForm.payDate"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :xs="24" :sm="12" :lg="6" class="tr">
              <el-form-item label="">
                <el-button size="small" type="primary" @click="submitScreenForm">搜索</el-button>
                <el-button size="small" @click="resetScreenForm">清空</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="tabs-container order-tabs-container clearfix">
        <el-tabs v-model="screenForm.status" type="card" @tab-click="changeTabs" class="fl" style="margin-right: 20px">
          <el-tab-pane label="全部" name="ALL"></el-tab-pane>
          <el-tab-pane label="待确认" name="WAIT"></el-tab-pane>
          <el-tab-pane label="待开始" name="WAIT_START"></el-tab-pane>
          <el-tab-pane label="租赁中" name="LEASE"></el-tab-pane>
          <el-tab-pane label="已到期-待回收" name="OVER"></el-tab-pane>
          <el-tab-pane label="已到期-已回收" name="RECOVER"></el-tab-pane>
          <el-tab-pane label="已取消" name="CANCEL"></el-tab-pane>
        </el-tabs>
        <el-button
          type="primary"
          @click="
            isShowDetail = true
            formType = 0
          "
          >新增租赁单</el-button
        >
      </div>
      <div class="order-main-container">
        <div class="table-top">
          <el-row style="width: 100%">
            <el-col :span="3">
              <span class="item product">商品</span>
            </el-col>
            <el-col :span="3" style="text-align: right"><span class="item">总租金（元）</span></el-col>
            <el-col :span="3" style="text-align: center"><span class="item">订金（元）</span></el-col>
            <el-col :span="7" style="text-align: center"><span class="item">收货信息</span></el-col>
            <el-col :span="2" style="text-align: center"><span class="item">租金（元）/月</span></el-col>
            <el-col :span="2" style="text-align: center"><span class="item">订单状态</span></el-col>
            <el-col :span="4" style="text-align: center"><span class="item">操作</span></el-col>
          </el-row>
        </div>
        <div class="order-item" v-for="order in dataList" :key="order.orderId">
          <div class="order-top">
            <span><b>订单号</b>：{{ order.id }}</span>
            <span><b>下单时间</b>：{{ order.createTime }}</span>
            <span v-if="order.startDate"><b>起租时间</b>：{{ order.startDate }}</span>
            <span v-if="order.endDate"><b>结束时间</b>：{{ order.realEndDate || order.endDate }}</span>
            <el-tag effect="dark" :type="order.payType == 'LINE' ? '' : 'success'">{{
              order.payType == 'LINE' ? '线下支付' : '微信支付'
            }}</el-tag>
            <div class="fr">
              <el-link type="primary" v-if="$restrict('detail')" :underline="false" @click="confirmOrder(order.id)"
                >查看详情</el-link
              >
              <!-- <el-link type="primary" :underline="false" @click="queryWorkOrder(order.orderId)">订单工单</el-link> -->
            </div>
          </div>
          <div class="order-content">
            <el-row style="width: 100%">
              <el-col :span="6" style="height: 100%">
                <div class="col-item-pro">
                  <div class="pro-item">
                    <div class="left">
                      <div class="image">
                        <img :src="$showImgUrl(order.categoryUrl)" style="height: 80px; width: 80px" />
                      </div>
                      <div class="main" style="justify-content: center">
                        <span>{{ order.goodsLeaseName }}</span>
                        <span>x{{ order.qty }}</span>
                      </div>
                    </div>
                    <div class="right" style="display: flex; flex-direction: column; justify-content: center">
                      <span>{{ order.totalAmount }}</span>
                      <span>总租金</span>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="3" style="height: 100%">
                <div class="col-item">
                  <div>{{ order.bookAmount }}</div>
                  <span>订金</span>
                </div>
              </el-col>
              <el-col :span="7" style="height: 100%">
                <div class="col-item">
                  <div>{{ order.userName }}/{{ order.userMobile }}</div>
                  <div class="ellipsis-2">
                    {{ order.province + order.city + order.area + order.street + order.userAddress }}
                  </div>
                </div>
              </el-col>
              <el-col :span="2" style="height: 100%">
                <div class="col-item">
                  <div class="totalprice">￥{{ order.leasePrice }}</div>
                </div>
              </el-col>
              <el-col :span="2" style="height: 100%">
                <div class="col-item">
                  <div :style="{ color: filterStatus(order, 'color') }">
                    {{ filterStatus(order, 'name') }}
                  </div>
                </div>
              </el-col>
              <el-col :span="4" style="height: 100%">
                <div class="col-item">
                  <div class="operate">
                    <el-button v-if="order.status === 'WAIT'" @click="confirmOrder(order.id)" type="text" size="small"
                      >确定租赁</el-button
                    >
                    <el-button
                      v-if="order.status === 'LEASE' || order.status === 'OVER'"
                      @click="confirmOrder(order.id)"
                      type="text"
                      size="small"
                      >确认回收</el-button
                    >
                    <el-popconfirm
                      title="确定取消订单吗？"
                      @confirm="cancelOrder(order.id)"
                      v-if="order.status === 'WAIT'"
                    >
                      <el-button slot="reference" type="text" size="small">取消订单</el-button>
                    </el-popconfirm>
                    <el-button v-if="order.status === 'LEASE'" @click="confirmOrder(order.id)" type="text" size="small"
                      >报修</el-button
                    >
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="no-data" v-if="dataList.length <= 0">暂无订单</div>
      </div>
      <div class="pagination clearfix">
        <div class="fr">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <detail v-else :id="id" @back="backList" :formType="formType" :title="'租赁订单' + formDialogTitles[formType]">
    </detail>
  </div>
</template>

<script>
import { getList, cancelOrder } from '@/api/tenancyOrder'
import detail from './detail.vue'
export default {
  components: {
    detail
  },
  data() {
    return {
      screenForm: {
        // 筛选表单数据
        id: '', // 订单号
        goodsName: '', // 商品名称
        userName: '', // 会员昵称
        userMobile: '', // 手机号
        status: 'ALL', // 状态
        createDate: '', // 创建时间
        payDate: '', // 支付时间
        evaluateStatus: '', // 评价状态
        sendStatus: '', // 派单异常
        workerOrderNo: '' // 信息编号
      },
      isShowDetail: false,
      id: '',
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      dataList: [],
      formDialogTitles: ['新增', '详情'],
      formType: 0,
      formVisible: false,
      typeIndex: '1'
    }
  },
  computed: {
    filterStatus() {
      return function (item, type) {
        if (item.status == 'WAIT') {
          return {
            name: '待确定订单',
            color: '#ff5300'
          }[type]
        } else if (item.status == 'WAIT_START') {
          return {
            name: '待开始',
            color: '#64c842'
          }[type]
        } else if (item.status == 'LEASE') {
          return {
            name: '租赁中',
            color: '#1281ff'
          }[type]
        } else if (item.status == 'OVER') {
          return {
            name: '待回收',
            color: '#9c84fe'
          }[type]
        } else if (item.status == 'RECOVER') {
          return {
            name: '已回收',
            color: '#817f7f'
          }[type]
        } else if (item.status == 'CANCEL') {
          return {
            name: '已取消',
            color: '#817f7f'
          }[type]
        }
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    backList() {
      this.id = ''
      this.isShowDetail = false
      this.getList()
    },
    changeTabs(tab, event) {
      this.getList()
    },
    // 获取数据列表
    getList() {
      // this.listLoading = true;

      let params = {
        orderId: this.screenForm.id, // 订单号
        goodsName: this.screenForm.goodsName, // 商品名称
        userName: this.screenForm.userName, // 会员昵称
        userMobile: this.screenForm.userMobile, // 手机号
        status: this.screenForm.status == 'ALL' ? '' : this.screenForm.status, // 状态
        startDate: this.screenForm.createDate[0] ? this.screenForm.createDate[0] : null, // 创建时间
        endDate: this.screenForm.createDate[1] ? this.screenForm.createDate[1] : null, // 创建时间
        startPayDate: this.screenForm.payDate[0] ? this.screenForm.payDate[0] : null, // 支付时间
        endPayDate: this.screenForm.payDate[1] ? this.screenForm.payDate[1] : null, // 支付时间
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }

      getList(params).then(res => {
        res.data.records.forEach(item => {
          item.startDate = item.startDate?.substring(0, 10)
          item.endDate = item.endDate?.substring(0, 10)
          item.realEndDate = item.realEndDate?.substring(0, 10)
          // item.websitName = this.handleText(item.websitName);
        })
        this.dataList = res.data.records
        this.listTotal = res.data.total
        // this.listLoading = false;
      })
    },

    confirmOrder(id) {
      this.id = id
      this.formType = 1
      this.isShowDetail = true
    },

    cancelOrder(id) {
      cancelOrder({
        id
      }).then(res => {
        if (res.code == 200) {
          this.$message.success('取消订单成功！')
          this.getList()
        }
      })
    },

    // 提交筛选表单
    submitScreenForm() {
      this.currentPage = 1
      this.getList()
    },

    // 重置筛选表单
    resetScreenForm() {
      this.$refs.screenForm.resetFields()
      this.currentPage = 1
      this.getList()
    },

    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getList()
    },

    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },

    // 获取省市区街道
    getRegion(level = 0, id = 0) {
      getRegion({
        pid: id
      }).then(res => {
        if (level === 0) {
          this.provinceList = res.data
        } else if (level === 1) {
          this.cityList = res.data
        } else if (level === 2) {
          this.areaList = res.data
        } else if (level === 3) {
          this.streetList = res.data
        }
      })
    },

    // 初始化省市区街道
    initRegion(level, item, id = 0) {
      let { province, city, area, street } = item
      let nextId = null
      getRegion({
        pid: id
      }).then(res => {
        if (level === 0) {
          this.provinceList = res.data
          nextId = this.addressForm.province = this.provinceList[this.$findElem(this.provinceList, 'name', province)].id
        } else if (level === 1) {
          this.cityList = res.data
          nextId = this.addressForm.city = this.cityList[this.$findElem(this.cityList, 'name', city)].id
        } else if (level === 2) {
          this.areaList = res.data
          nextId = this.addressForm.area = this.areaList[this.$findElem(this.areaList, 'name', area)].id
        } else if (level === 3) {
          this.streetList = res.data
          nextId = this.addressForm.street = this.streetList[this.$findElem(this.streetList, 'name', street)].id
        }
        if (level < 3) {
          level = level + 1
          this.initRegion(level, item, nextId)
        }
      })
    },

    // 保存 修改收货地址 表单
    save(cancel) {
      this.$refs.addressForm.validate(valid => {
        if (valid) {
        }
      })
    },

    // 查看工单
    toWorkOrderDetail(orderId) {
      this.$router.push({
        name: 'workOrder_detail',
        query: {
          orderId
        }
      })
    },

    handleRefreshList() {
      this.getList()
      // this.recordSelected = []
      // this.$refs.pageRef.refreshList()
    }
  }
}
</script>
<style scoped lang="scss">
.tabs-container {
  margin-bottom: 10px;
}
</style>
