<template>
  <el-dialog
    append-to-body
    title="选择售票员"
    :visible.sync="visible"
    width="400px"
    @close="handleClose">
    <el-form
      :model="form"
      ref="form"
      label-width="80px"
      style="padding:20px">
      <el-form-item
        verify
        label="售票员"
        prop="cancel_manager">
        <el-select
          value-key="id"
          v-model="form.cancel_manager">
          <el-option
            v-for="item in salesList"
            :key="item.id"
            :value="item"

            :label="item.nickName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        verify
        label="退款方式"
        prop="cancel_pay_channel">
        <el-select
          v-model="form.cancel_pay_channel"
          ref="channelSelect"
          name="channel-select">
          <el-option
            v-if="returnInOrigin&&price!==0"
            :value="defaultPayment"
            :label="defaultPayment"
          ></el-option>
          <template v-else>
            <el-option
              v-for="item in payChannelOptions"
              :key="item"
              :value="item"
              :label="item"
            ></el-option>
            <el-option
              v-if="!payChannelOptions.includes(defaultPayment)&&price!==0"
              :value="defaultPayment"
              :label="defaultPayment"
            ></el-option>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="showPassword"
        verify
        label="审批密码"
        prop="cancel_password">
        <el-input
          v-model="form.cancel_password"
          show-password></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button
        type="primary"
        @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getSystemConfigList } from '@/api/systemConfig'

export default {
  props: {
    defaultPayment: {
      type: String,
      default: ''
    }
  },
  computed: {
    salesList () {
      return this.$store.state.user.salesList
    },
    payChannelOptions () {
      return this.$store.state.app.payChannelList.filter(i => i.name.indexOf('旅行社') < 0).filter(i => i.type === 'NOPAY').map(i => i.name)
    },
    returnInOrigin () {
      const value = this.$store.state.app.systemConfig.find(i => i.configKey === 'is_must_refund_in_origin_way')

      return value && value.configValue === '1'
    }
  },
  data () {
    return {
      visible: false,
      price: 0,
      showPassword: false,
      form: {
        cancel_manager: '',
        cancel_pay_channel: '',
        cancel_password: ''
      }
    }
  },
  methods: {
    show (id, status, price) {
      this.visible = true
      this.$nextTick(() => {
        this.form.cancel_manager = this.salesList.find(i => i.id === id)
        this.form.cancel_pay_channel = this.defaultPayment
        this.price = price
        if (price === 0) {
          this.form.cancel_pay_channel = this.payChannelOptions[0]
        }

        if (!['USED', 'OUTOFDATE', 'COMPLETE'].includes(status)) {
          this.showPassword = false
          return
        }

        getSystemConfigList().then(res => {
          let item1 = res.list.find(x => x.configKey === 'cancel_special_ticket_approve_password')
          if (item1 && item1.configValue) {
            this.showPassword = true
          } else {
            this.showPassword = false
          }
        })
      })
    },
    handleClose () {
      this.visible = false
    },
    submit () {
      if (this.showPassword) {
        if (!this.form.cancel_password) {
          return this.$message.error('请补充密码')
        }
      }
      this.$emit('change', { cancel_manager: this.form.cancel_manager, cancel_pay_channel: this.form.cancel_pay_channel, cancel_password: this.showPassword ? this.form.cancel_password : undefined })
      this.handleClose()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog .el-form-item {
  display: inline-block;
}
::v-deep .el-form-item__content{
    width: 200px;
}
</style>
