<template>
  <div class="form-wrap">
    <el-form
      class="search-box"
      ref="form"
      :model="form"
      :inline="true"
      label-width="70px">
      <div class="block-title">
        查询条件
      </div>
      <el-form-item
        label="名称"
        prop="keyWords1">
        <el-input
          v-model="form.keyWords1"
          clearable></el-input>
      </el-form-item>
      <el-form-item
        label="助记符"
        prop="keyWords3">
        <el-input v-model="form.keyWords3"></el-input>
      </el-form-item>
      <el-form-item
        label="状态"
        prop="keyWords6">
        <el-select
          v-model="form.keyWords6">
          <el-option
            value=""
            label="全部"
          ></el-option>
          <el-option
            :value="1"
            label="上线"
          ></el-option>
          <el-option
            :value="0"
            label="下线"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="联系人"
        prop="keyWords4">
        <el-input v-model="form.keyWords4"></el-input>
      </el-form-item>
      <el-form-item
        label="联系手机"
        prop="keyWords5">
        <el-input v-model="form.keyWords5"></el-input>
      </el-form-item>
      <div class="btn-wrap">
        <el-button @click="reset()">
          重置
        </el-button>
        <el-button
          type="primary"
          @click="getAgencyList(true)">
          搜索
        </el-button>

        <el-button
          type="primary"
          class="btn"
          @click="showDialog('new')">
          创建{{ agencyName() }}
        </el-button>
      </div>
    </el-form>

    <div class="table-box">
      <div class="block-title">
        {{ agencyName() }}列表
      </div>
      <el-table
        border
        stripe
        :data="tableData"
        v-loading="loading">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form
              label-position="right"
              inline
              class="table-expand"
              label-width="90px">
              <el-form-item
                v-if="props.row.email"
                label="邮箱">
                <span>{{ props.row.email }}</span>
              </el-form-item>
              <el-form-item
                v-if="props.row.opening_bank"
                label="开户行">
                <span>{{ props.row.opening_bank }}</span>
              </el-form-item>
              <el-form-item
                v-if="props.row.account"
                label="对公账户">
                <span>{{ props.row.account }}</span>
              </el-form-item>
              <el-form-item
                v-if="props.row.tax_name"
                label="发票抬头">
                <span>{{ props.row.tax_name }}</span>
              </el-form-item>
              <el-form-item
                v-if="props.row.tax_id"
                label="税号">
                <span>{{ props.row.tax_id }}</span>
              </el-form-item>
              <el-form-item
                style="width: 60%;"
                v-if="props.row.address"
                label="地址">
                <span>{{ props.row.address }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          width="120px"
          :label="`${agencyName()}名称`"
          prop="name">
        </el-table-column>
        <el-table-column
          label="类型"
          prop="category">
        </el-table-column>
        <el-table-column
          label="预付余额"
          prop="prepayment_amount">
        </el-table-column>
        <el-table-column
          label="信用额度"
          prop="prepayment_limit">
          <template slot-scope="scope">
            {{ scope.row.prepayment_limit }}
          </template>
        </el-table-column>
        <el-table-column
          label="累计消费"
          prop="saled_money">
        </el-table-column>
        <el-table-column
          label="折扣"
          prop="discount">
        </el-table-column>
        <el-table-column
          width="120"
          prop="area"
          label="地区">
        </el-table-column>
        <el-table-column
          prop="contacts_name"
          label="联系人">
        </el-table-column>
        <el-table-column
          width="100"
          prop="contacts_phone"
          label="联系方式">
        </el-table-column>
        <el-table-column
          prop="guide_count"
          label="导游数">
        </el-table-column>
        <el-table-column
          width="160"
          label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.createTime | formatTime }}
          </template>
        </el-table-column>
        <el-table-column
          width="160"
          label="有效期至">
          <template slot-scope="scope">
            {{ scope.row.valid_date | formatDate }}
          </template>
        </el-table-column>
        <el-table-column
          width="120"
          label="状态">
          <template slot-scope="scope">
            <span>{{ scope.row.is_valid ? '已激活' : '已禁用' }}</span>
            <el-button
              type="text"
              size="small"
              @click="offSale(scope.row)"
              class="offSale-btn"
              v-if="scope.row.is_valid">
              <i class="iconfont icon-offSale"></i>禁用
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="onSale(scope.row)"
              class="onSale-btn"
              v-else>
              <i class="iconfont icon-onSale"></i>激活
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          width="160"
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="text"
              v-if="checkPermission('travel_agency:prepay_add')"
              @click="$refs.addAmount.show(scope.row.id)">
              充值 / 扣款
            </el-button>
            <el-button
              size="small"
              type="text"
              @click="showDialog('edit', scope.row)">
              编辑
            </el-button>
            <el-button
              size="small"
              type="text"
              @click="deleteAgency(scope.row)">
              删除
            </el-button>
          </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="getAgencyList()"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
    <!-- 弹框 -->
    <ElDialog
      title="编辑信息"
      width="760px"
      v-model="dialogVisible">
      <AgencyDialog
        :dialog-type="dialogType"
        :ticket-type-list="ticketTypeList"
        :current-item="currentItem"
        @updateList="getAgencyList">
      </AgencyDialog>
    </ElDialog>

    <AddAmount
      ref="addAmount"
      @update="getAgencyList()"></AddAmount>
  </div>
</template>

<script>
import checkPermission from '@/utils/checkPermission'
import { cloneDeep } from 'lodash'
import { getTicketTypeList } from '@/api/ticketType'
import { apiGetTravelAgencyList, apiDeleteTravelAgency, apiUpdateTravelAgency } from '@/api/travelAgency'
import ElDialog from '@/components/Dialog'
import AgencyDialog from './agencySetting/EditDialog'
import AddAmount from './agencySetting/AddAmount'

import moment from 'moment'

export default {
  components: {
    ElDialog,
    AgencyDialog,
    AddAmount
  },
  data () {
    return {
      loading: false,
      form: {
        pageNum: 1,
        pageSize: 10,
        keyWords1: '', // 名称
        keyWords2: '',
        keyWords3: '', // 助记符
        keyWords4: '', // 联系人
        keyWords5: '', // 手机
        keyWords6: '' // 状态
      },
      total: 0,
      tableData: [],
      dialogVisible: false,
      dialogType: 'edit',
      currentItem: {},
      ticketTypeList: [] // 票种列表
    }
  },
  created () {
    this.getGroupTicketList().then(() => {
      this.getAgencyList()
    })
  },
  methods: {
    checkPermission,
    // 获取团客票种列表
    getGroupTicketList () {
      return getTicketTypeList({
        keyWords2: 2,
        keyWords4: 1,
        pageNum: 1,
        pageSize: 1000
      }).then(res => {
        this.ticketTypeList = res.list
      })
    },
    handleSizeChange (size) {
      this.form.pageSize = size
      this.getAgencyList()
    },
    // 获取旅行社列表
    getAgencyList (goFirst) {
      this.loading = true
      goFirst && (this.form.pageNum = 1)
      apiGetTravelAgencyList(this.form).then(res => {
        this.total = res.total
        this.tableData = res.list
      }).finally(() => {
        this.loading = false
      })

      // 更新全局旅行社列表
      this.$store.dispatch('getAgencyList')
    },
    // 打开对话框
    showDialog (type, item) {
      this.dialogType = type
      this.currentItem = cloneDeep(item)
      this.dialogVisible = true
    },
    // 删除旅行社
    deleteAgency (item) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        apiDeleteTravelAgency(item).then(res => {
          this.$message.success('删除成功')
          this.getAgencyList()
        })
      })
    },
    reset () {
      this.$refs.form.resetFields()
    },
    offSale (data) {
      let form = Object.assign({}, data)
      form.is_valid = 0
      apiUpdateTravelAgency(form).then(res => {
        this.$message.success('操作成功')
        this.getAgencyList()
      })
    },
    onSale (data) {
      let saleEnd = moment(data.valid_date).hours(23).minutes(59).seconds(59)
      if (moment().isAfter(saleEnd)) {
        this.$alert(`请修改${this.agencyName()}有效日期`, `${this.agencyName()}已过期`, {
          confirmButtonText: '知道了'
        })
      } else {
        let form = Object.assign({}, data)
        form.is_valid = 1
        apiUpdateTravelAgency(form).then(res => {
          this.$message.success('操作成功')
          this.getAgencyList()
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.offSale-btn{
  color: #F56C6C
}
.onSale-btn{
  color: #67C23A
}
</style>
