<template>
  <el-dialog
    title="预订单详情"
    :visible.sync="visible"
    width="800px"
    @close="handleClose">
    <el-form
      class="dialog-info"
      inline
      ref="form"
      :model="form"
      label-width="120px">
      <el-form-item
        verify
        :label="`${agencyName()}名称`"
        prop="travelAgencyId">
        <el-select
          disabled
          v-model="form.travelAgencyId"
          @change="getGuideList">
          <el-option
            v-for="item in agencyList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="导游名称">
        <el-select
          v-model="form.guideId"
          disabled>
          <el-option
            v-for="item in guideList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        verify
        label="支付方式"
        prop="pay_type">
        <el-select
          v-model="form.pay_type"
          disabled>
          <el-option
            v-for="item in payTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        verify
        label="人数"
        prop="number">
        <el-input-number
          v-model="form.number"
          :min="1"
          :precision="0"></el-input-number>
      </el-form-item>
      <el-form-item
        verify
        label="游玩时间"
        prop="play_date">
        <el-date-picker
          :clearable="false"
          :editable="false"
          :picker-options="dateOption"
          v-model="form.play_date"
          type="date"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="客源地">
        <el-input
          disabled
          v-model="form.customer_source_area"></el-input>
      </el-form-item>
      <el-form-item label="销售专员">
        <el-input
          disabled
          v-model="form.salesperson"></el-input>
      </el-form-item>
      <el-form-item
        label="备注"
        style="width:100%">
        <el-input
          disabled
          type="textarea"
          :rows="3"
          v-model="form.remark"
          placeholder="如：车辆信息、导游信息、游客信息、门票信息等"></el-input>
      </el-form-item>
      <el-form-item
        label="其他需求"
        style="width:100%">
        <el-input
          disabled
          type="textarea"
          :rows="3"
          v-model="form.remark_request"
          placeholder="如：运营需求、门票需求等"></el-input>
      </el-form-item>
    </el-form>

    <span
      slot="footer">
      <el-button
        @click="handleClose">取消</el-button>
      <el-button
        type="primary"
        @click="handleSubmit">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { apiGetGuideList, editAgencyPreOrder } from '@/api/travelAgency'
import moment from 'moment'

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

export default {
  props: {
    agencyList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      hideButton: false,
      visible: false,
      orderInfo: {},
      guideList: [],
      payTypeOptions,
      form: {
        customer_source_area: '',
        guideId: 0,
        id: 0,
        number: 0,
        order_id: 0,
        pay_type: 0,
        phone: '',
        play_date: '',
        remark: '',
        remark_request: '',
        salesperson: '',
        status: '',
        travelAgencyId: 0,
        travel_agency_orderNo: ''
      },
      dateOption: {
        // 日历禁用日期
        disabledDate (theTime) {
          let startTime = moment().format('YYYY-MM-DD') + ' 00:00:00'
          return moment(theTime).isBefore(startTime)
        }
      }
    }
  },
  methods: {
    getPayType (value) {
      return payTypeOptions.find(i => i.value === value) || { label: '无', color: 'info' }
    },
    show (data) {
      this.visible = true
      this.orderInfo = data
      this.form = JSON.parse(JSON.stringify(data))
      this.getGuideList(this.form.travelAgencyId)
    },
    handleClose () {
      this.visible = false
    },
    getGuideList (agencyId) {
      let agency = this.agencyList.find(a => a.id === agencyId)

      apiGetGuideList({
        keyWords3: agency && agency.name,
        keyWords6: 1,
        pageNum: 0,
        pageSize: -1
      }).then(res => {
        this.guideList = res.list
        this.form.guideId = this.guideList[0] ? this.guideList[0].id : ''
      })
    },
    handleSubmit () {
      let guide = this.guideList.find(a => a.id === this.form.guideId)

      this.form.guideId = guide ? guide.id : ''
      this.form.guide_name = guide ? guide.name : ''

      this.$refs.form.validate((valid) => {
        if (valid) {
          editAgencyPreOrder(this.form).then(res => {
            this.$message.success('操作成功')
            this.handleClose()
            this.$emit('update')
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
