<template>
  <a-spin :spinning="loading">
    <a-card title="导游列表">
      <a-form-model
        class="search-box"
        :model="form"
        layout="inline"
        @submit.native.prevent="getOrderList"
      >
        <a-form-model-item
          label="导游名称"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-input v-model="form.name"></a-input>
        </a-form-model-item>
        <a-button
          type="primary"
          @click="getList"
        >
          搜索
        </a-button>
      </a-form-model>
      <a-table
        :columns="columns"
        :data-source="dataList"
        :pagination="pagination"
        :row-key="record => record.id"
        @change="handleTableChange"
      >
        <template slot="image" slot-scope="text, record">
          <div v-if="record.image">
            <img :src="JSON.parse(record.image)[0].url" alt="" width="100">
          </div>
        </template>

        <template slot="guideEvaluations" slot-scope="text, record">
          {{ record.guideEvaluations.length }}
        </template>

        <template slot="is_valid" slot-scope="text, record">
          <a-tag :color="record.is_valid ?'green':'red'">
            {{ record.is_valid ?"已激活":"已禁用" }}
          </a-tag>
        </template>

        <template slot="operation" slot-scope="text, record">
          <a-button
            size="small"
            type="primary"
            @click="handleEdit(record)"
          >
            编辑
          </a-button>
          <a-button
            size="small"
            type="primary"
            @click="$refs.detail.show(record.guideEvaluations)"
          >
            详情
          </a-button>

        </template>
      </a-table>

      <EditGuide
        v-model="editVisible"
        :form-data="currentItem"
        :scenic-list="scenicList"
        :sales-channel="salesChannel"
        :ticket-type-list="ticketTypeList"
        @update="getList"
      ></EditGuide>

      <Detail
        ref="detail"
        @update="getList"
      ></Detail>
    </a-card>
  </a-spin>
</template>

<script>
import { guideList } from '@/api/guide'
import { getScenic } from '@/api/ticketSetting/scenic'
import { getSalesChannel } from '@/api/ticketSetting/channel'
import { getTicketType } from '@/api/ticketSetting/ticket'
import EditGuide from './EditGuide'
import Detail from './Detail'

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '库存',
    dataIndex: 'book_limit',
    key: 'book_limit',
    scopedSlots: { customRender: 'book_limit' }
  },
  {
    title: '图片',
    dataIndex: 'image',
    key: 'image',
    scopedSlots: { customRender: 'image' }
  },
  {
    title: '评论数量',
    dataIndex: 'guideEvaluations',
    key: 'guideEvaluations',
    scopedSlots: { customRender: 'guideEvaluations' }
  },
  {
    title: '状态',
    dataIndex: 'is_valid',
    key: 'is_valid',
    scopedSlots: { customRender: 'is_valid' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: '200px',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  components: {
    EditGuide,
    Detail
  },
  data () {
    return {
      columns,
      form: {
        name: ''
      },
      loading: false,
      dataList: [],
      pagination: {},
      params: {
        pageNum: 1,
        pageSize: 10
      },
      scenicList: [],
      salesChannel: [],
      ticketTypeList: [],
      editVisible: false,
      // 当前导游对象
      currentItem: null
    }
  },
  created () {
    this.getList()
    this.getScenicList({ pageNum: 1, pageSize: 999 })
    this.getSalesChannel()
    this.getBatchTicket()
  },
  methods: {
    getList () {
      this.loading = true
      guideList({ ...this.params, name: this.form.name }).then(res => {
        this.dataList = res.extraInfo.list

        const pagination = { ...this.pagination }
        pagination.total = res.extraInfo.total

        this.pagination = pagination
      }).finally(() => {
        this.loading = false
      })
    },
    handleTableChange (pagination, filters, sorter) {
      this.params.pageNum = pagination.current
      this.params.pageSize = pagination.pageSize

      this.getList()
    },
    handleEdit (data) {
      this.editVisible = true
      this.currentItem = data
    },
    getScenicList (params) {
      getScenic(params).then(res => {
        const getSenicList = res.extraInfo.list.filter(e => e.id !== 9999)
        this.scenicList = getSenicList
      })
    },
    getSalesChannel () {
      getSalesChannel().then(res => {
        this.salesChannel = res.extraInfo.list
      })
    },
    getBatchTicket () {
      const params = {
        pageSize: 9999,
        type: 'batch'
      }
      getTicketType(params).then(res => {
        this.ticketTypeList = res.extraInfo.list
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
