<template>
  <div class="form-wrap">
    <el-form
      class="search-box"
      ref="form"
      :model="form"
      :inline="true"
      label-width="120px"
    >
      <el-form-item
        label="预订单号"
        prop="keyWords1"
      >
        <el-input
          v-model="form.keyWords1"
          clearable></el-input>
      </el-form-item>

      <el-form-item
        :label="agencyName()"
        prop="keyWords2">
        <el-select
          clearable
          v-model="form.keyWords2"
          @change="getGuideList">
          <el-option
            v-for="item in agencyList"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="带队导游"
        prop="keyWords3">
        <el-select
          clearable
          v-model="form.keyWords3">
          <el-option
            v-for="item in guideList"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="状态"
        prop="keyWords4"
      >
        <el-select
          clearable
          v-model="form.keyWords4">
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="审批人"
        prop="keyWords5"
      >
        <el-input
          clearable
          v-model="form.keyWords5"></el-input>
      </el-form-item>

      <div class="btn-wrap">
        <el-button @click="reset">
          重置
        </el-button>
        <el-button
          type="primary"
          @click="getAgencyPreOrderList(true)"
        >
          搜索
        </el-button>
      </div>
    </el-form>

    <div class="table-box">
      <div class="block-title">
        预订订单列表
      </div>
      <el-table
        border
        stripe
        :data="tableData"
        v-loading="loading"
      >
        <el-table-column
          label="预订单号"
          width="140"
          prop="travel_agency_orderNo"
        >
          <template slot-scope="scope">
            <Ellipsis
              type="tooltip"
              :content="scope.row.travel_agency_orderNo"
              :length="10"></Ellipsis>
            <el-tooltip
              content="复制"
              placement="top"
              effect="dark">
              <i
                class="el-icon-document"
                v-clipboard="()=>scope.row.travel_agency_orderNo"
                v-clipboard:success="copySuccess"
                v-clipboard:error="copyError"></i>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column
          label="已出票订单号"
          prop="orderNo"
          min-width="140"
        >
          <template
            slot-scope="scope"
            v-if="scope.row.orderNo">
            <Ellipsis
              type="tooltip"
              :content="scope.row.orderNo"
              :length="10"></Ellipsis>
            <el-tooltip
              content="复制"
              placement="top"
              effect="dark">
              <i
                class="el-icon-document"
                v-clipboard="()=>scope.row.orderNo"
                v-clipboard:success="copySuccess"
                v-clipboard:error="copyError"></i>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column
          width="120px"
          :label="`${agencyName()}名称`"
          prop="travelAgencyName"
        >
        </el-table-column>
        <el-table-column
          label="导游名称"
          prop="guide_name"
        >
        </el-table-column>
        <el-table-column
          label="支付方式"
        >
          <template slot-scope="scope">
            <el-tag :type="getPayType(scope.row.pay_type).color">
              {{ getPayType(scope.row.pay_type).label }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="人数"
          prop="number"
        >
        </el-table-column>
        <el-table-column
          label="游玩时间"
          prop="play_date"
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          label="客源地"
          prop="customer_source_area"
        >
        </el-table-column>
        <el-table-column
          label="销售专员"
          prop="salesperson"
        >
        </el-table-column>
        <el-table-column
          label="备注"
          prop="remark"
          min-width="120"
        >
          <template slot-scope="scope">
            <Ellipsis
              v-if="scope.row.remark"
              :content="scope.row.remark"
              :length="10"></Ellipsis>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column
          label="其他需求"
          prop="remark_request"
          min-width="120"
        >
          <template slot-scope="scope">
            <Ellipsis
              v-if="scope.row.remark_request"
              :content="scope.row.remark_request"
              :length="10"></Ellipsis>
            <span v-else>无</span>
          </template>
        </el-table-column>

        <el-table-column
          label="审批人"
          prop="audit_manager_name"
        >
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="createTime"
          width="140"
        >
          <template slot-scope="scope">
            {{ scope.row.createTime | formatTime }}
          </template>
        </el-table-column>
        <el-table-column
          width="90"
          label="状态"
          prop="status"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-tag :type="getStatus(scope.row.status).color">
              {{ getStatus(scope.row.status).label }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          width="100"
          fixed="right"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="$refs.editDialog.show(scope.row)"
              v-if="checkPermission('travel_agency:travel_agency_preorder_edit')&&(scope.row.status==='APPROVE' || scope.row.status==='WAIT_AUDIT')">
              编辑
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          width="180"
          fixed="right"
          label="下载预订单"
        >
          <template slot-scope="scope">
            <el-link @click="$refs.updateLog.show(scope.row.id)">
              操作记录
            </el-link>
            <el-link @click="$refs.auditDialog.show(scope.row,true)">
              详情
            </el-link>
            <span v-if="scope.row.loading">正在加载</span>
            <el-link
              v-else
              type="primary"
              @click="download(scope.row)"
            >
              下载
            </el-link>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        :current-page.sync="form.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="form.pageSize"
        @size-change="handleSizeChange"
        @current-change="getAgencyPreOrderList()"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </div>

    <AuditDialog
      ref="auditDialog"
      @update="getAgencyPreOrderList(true)"></AuditDialog>

    <EditDialog
      ref="editDialog"
      :agency-list="agencyList"
      @update="getAgencyPreOrderList(true)"></EditDialog>

    <UpdateLog ref="updateLog"></UpdateLog>
  </div>
</template>

<script>
import { apiGetGuideList, getAgencyPreOrderList, getTravelAgencyPreorder } from '@/api/travelAgency'
import checkPermission from '@/utils/checkPermission'
import Ellipsis from '@/components/Ellipsis'
import AuditDialog from './preOderList/AuditDialog'
import EditDialog from './preOrderManage/EditDialog'
import UpdateLog from './preOderList/UpdateLog'

const payTypeOptions = [
  {
    label: '到付',
    value: 1,
    color: 'success'
  },
  {
    label: '预付',
    value: 2,
    color: 'danger'
  }
]

const statusList = [
  {
    label: '待审核',
    value: 'WAIT_AUDIT',
    color: 'primary'
  },
  {
    label: '已审核',
    value: 'APPROVE',
    color: 'success'
  },
  {
    label: '已拒绝',
    value: 'REFUSE',
    color: 'danger'
  },
  {
    label: '已取消',
    value: 'CANCELED',
    color: 'info'
  },
  {
    label: '已出票',
    value: 'SUCCESS',
    color: 'warning'
  }
]

export default {
  components: {
    Ellipsis,
    AuditDialog,
    EditDialog,
    UpdateLog
  },
  created () {
    this.getAgencyPreOrderList()
  },
  computed: {
    agencyList () {
      return this.$store.state.app.agencyList
    }
  },
  data () {
    return {
      total: 0,
      loading: false,
      tableData: [],
      guideList: [],
      statusList,
      form: {
        keyWords1: '', // 预订单号
        keyWords2: '', // 旅行社名称
        keyWords3: '', // 导游名称
        keyWords4: '', // 状态
        keyWords5: '', // 预订操作人
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  methods: {
    checkPermission,
    createTickets (data) {
      this.$router.push({ name: 'preOrderGroup' })
      // 传递到全局
      this.$store.dispatch('preOrderGroup/setPreOrderInfo', data)
    },
    getStatus (status) {
      return this.statusList.find(i => i.value === status) || { label: '无', color: 'info' }
    },
    getPayType (value) {
      return payTypeOptions.find(i => i.value === value) || { label: '无', color: 'info' }
    },
    getGuideList (agencyName) {
      if (!agencyName) {
        this.form.keyWords3 = ''
        this.guideList = []
        return
      }

      apiGetGuideList({
        keyWords3: agencyName,
        keyWords6: 1,
        pageNum: 0,
        pageSize: -1
      }).then(res => {
        this.guideList = res.list
        this.form.keyWords3 = this.guideList[0] ? this.guideList[0].name : ''
      })
    },
    reset () {
      this.$refs.form.resetFields()
    },
    handleSizeChange (size) {
      this.form.pageSize = size
      this.getAgencyPreOrderList()
    },

    getAgencyPreOrderList (goFirst) {
      this.loading = true
      goFirst && (this.form.pageNum = 1)
      getAgencyPreOrderList(this.form).then(res => {
        this.tableData = res.list
        this.total = res.total
        this.loading = false
      })
    },
    copySuccess () {
      this.$message.success('复制成功')
    },
    copyError () {
      this.$message.error('复制失败')
    },
    download (data) {
      this.$set(data, 'loading', true)
      getTravelAgencyPreorder(data.id).then(res => {
        if (!res?.data) {
          this.$message.error('暂无下载地址')
          return
        }
        window.location.href = res?.data
      }).finally(() => {
        this.$set(data, 'loading', false)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-icon-document{
  cursor: pointer;
}
</style>
