<template>
  <div>
    <a-card title="查询条件">
      <a-form-model
        class="search-box"
        :model="form"
        layout="inline"
      >
        <a-form-model-item
          label="旅行社名称"
          prop="name"
        >
          <a-input
            placeholder="请输入旅行社名称"
            v-model="form.name"
            allow-clear
          />
        </a-form-model-item>

        <a-form-model-item>
          <a-button
            type="primary"
            @click="search"
          >
            搜索
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>

    <a-card title="旅行社列表">
      <template v-if="permissionList">
        <a-button
          slot="extra"
          size="small"
          @click="batchBindPerforms"
        >
          批量绑定节目
        </a-button>

        <a-button
          slot="extra"
          size="small"
          @click="batchBindTickets"
        >
          批量绑定门票
        </a-button>

        <a-button
          slot="extra"
          size="small"
          type="primary"
          icon="plus"
          @click="$refs.addModal.show()"
        >
          创建旅行社
        </a-button>
      </template>

      <a-spin :spinning="loading">
        <a-table
          :columns="columns"
          :data-source="userList"
          :pagination="pagination"
          :row-key="record => record.id"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          @change="handleTableChange"
          :scroll="{ x: 1500}"
        >
          <template
            slot="status"
            slot-scope="text, record"
          >
            <a-tag :color="record.status==='active'?'green':'gray'">
              {{ record.status==='active'?'已激活':'已禁用' }}
            </a-tag>

          </template>

          <template
            slot="activeOperation"
            slot-scope="text, record"
          >
            <a-button
              size="small"
              :type="record.status==='active'?'':'primary'"
              @click="activeUser(record)"
            >
              {{ record.status==='active'?'禁用':'激活' }}
            </a-button>
          </template>

          <template
            slot="moneyOperation"
            slot-scope="text, record"
          >

            <a-button
              size="small"
              type="primary"
              @click="$refs.rechargeModal.show(record)"
            >
              充值
            </a-button>

            <a-button
              size="small"
              type="danger"
              @click="$refs.deductModal.show(record)"
            >
              扣除
            </a-button>
          </template>

          <template
            v-if="permissionList"
            slot="operation"
            slot-scope="text, record"
          >
            <a-button
              v-if="['demo','YINXIANGMAZU'].includes(project_name)"
              size="small"
              type="primary"
              @click="$refs.bindPerform.show(record)"
            >
              绑定节目
            </a-button>

            <a-button
              size="small"
              type="primary"
              @click="$refs.bindTickets.show(record)"
            >
              绑定门票
            </a-button>

            <a-button
              size="small"
              type="primary"
              @click="$refs.setModal.show(record)"
            >
              编辑
            </a-button>

            <a-popconfirm
              title="确定要删除这个账号吗？"
              @confirm="deleteUser(record.id)"
            >
              <a-icon
                slot="icon"
                type="question-circle-o"
                style="color: red"
              />
              <a-button
                size="small"
                type="danger"
              >
                删除
              </a-button>
            </a-popconfirm>
          </template>
        </a-table>
      </a-spin>
    </a-card>

    <!-- 创建 -->
    <AddModal
      ref="addModal"
      @ok="getTravelAgencyUser(1)"
    ></AddModal>

    <!-- 编辑 -->
    <SetModal
      ref="setModal"
      @ok="getTravelAgencyUser(pagination.pageNum)"
    ></SetModal>

    <!-- 充值 -->
    <RechargeModal
      ref="rechargeModal"
      @ok="getTravelAgencyUser(pagination.pageNum)"
    ></RechargeModal>

    <!-- 扣费 -->
    <DeductModal
      ref="deductModal"
      @ok="getTravelAgencyUser(pagination.pageNum)"
    ></DeductModal>

    <!-- 绑定节目 -->
    <BindPerform
      ref="bindPerform"
      @ok="getTravelAgencyUser(pagination.pageNum)"
    ></BindPerform>

    <!-- 绑定门票 -->
    <BindTickets
      ref="bindTickets"
      @ok="getTravelAgencyUser(pagination.pageNum)"
    ></BindTickets>

    <!-- 批量绑定节目 -->
    <BatchBindPerforms
      ref="batchBindPerforms"
      @ok="getTravelAgencyUser(pagination.pageNum),selectedRowKeys=[],selectedRows=[]"
    ></BatchBindPerforms>

    <!-- 批量绑定门票 -->
    <BatchBindTickets
      ref="batchBindTickets"
      @ok="getTravelAgencyUser(pagination.pageNum),selectedRowKeys=[],selectedRows=[]"
    ></BatchBindTickets>
  </div>
</template>

<script>
import { getTravelAgencyUser, activeTravelAgencyUser, deleteTravelAgencyUserById } from '@/api/saleChannel/travelAgency'

import AddModal from './travelAgency/AddModal'
import SetModal from './travelAgency/SetModal'
import RechargeModal from './travelAgency/RechargeModal'
import DeductModal from './travelAgency/DeductModal'
import BindPerform from './travelAgency/BindPerform'
import BindTickets from './travelAgency/BindTickets'
import BatchBindPerforms from './travelAgency/BatchBindPerforms'
import BatchBindTickets from './travelAgency/BatchBindTickets'

const columns = [
  {
    title: '名称',
    width: 160,
    dataIndex: 'name',
    key: 'name',
    fixed: 'left'
  },
  {
    title: '用户名',
    width: 160,
    dataIndex: 'username',
    key: 'username'
  },
  {
    title: '余额',
    dataIndex: 'balance',
    key: 'balance'
  },
  {
    title: '可挂账金额',
    dataIndex: 'accountable_amount',
    key: 'accountable_amount'
  },
  {
    title: '联系人',
    dataIndex: 'contact',
    key: 'contact'
  },
  {
    title: '电话',
    dataIndex: 'phone',
    key: 'phone'
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    key: 'email'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    fixed: 'right',
    width: '100px',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '激活&禁用',
    dataIndex: 'activeOperation',
    key: 'activeOperation',
    fixed: 'right',
    width: '120px',
    scopedSlots: { customRender: 'activeOperation' }
  },
  {
    title: '金额操作',
    width: '140px',
    dataIndex: 'moneyOperation',
    key: 'moneyOperation',
    fixed: 'right',
    scopedSlots: { customRender: 'moneyOperation' }
  },
  {
    title: '操作',
    width: '240px',
    dataIndex: 'operation',
    key: 'operation',
    fixed: 'right',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  components: {
    AddModal,
    SetModal,
    RechargeModal,
    DeductModal,
    BatchBindTickets,
    BindTickets,
    BindPerform,
    BatchBindPerforms
  },
  data () {
    return {
      project_name: localStorage.mgt_project,
      columns,
      loading: false,
      form: {
        name: ''
      },
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      selectedRowKeys: [],
      selectedRows: [],
      userList: []
    }
  },
  computed: {
    permissionList () {
      return !!this.$store.state.user.permissionList.includes('travelagency_setting:travelagency_user_setting')
    }
  },
  created () {
    this.getTravelAgencyUser()
  },
  methods: {
    search () {
      this.pagination.pageNum = 1
      this.getTravelAgencyUser()
    },
    getTravelAgencyUser () {
      this.loading = true
      const { pageSize, pageNum } = this.pagination
      getTravelAgencyUser({ pageNum, pageSize, name: this.form.name }).then(res => {
        // console.log(res)
        const { list, total } = res.extraInfo
        this.userList = list
        this.pagination.total = total
      }).finally(() => {
        this.loading = false
      })
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination.pageNum = pagination.current
      this.getTravelAgencyUser(this.pagination.pageNum)
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    batchBindTickets () {
      if (this.selectedRowKeys.length === 0) {
        this.$message.error('请选择旅行社')
        return
      }
      this.$refs.batchBindTickets.show(this.selectedRows)
    },
    batchBindPerforms () {
      if (this.selectedRowKeys.length === 0) {
        this.$message.error('请选择旅行社')
        return
      }
      this.$refs.batchBindPerforms.show(this.selectedRows)
    },
    activeUser (user) {
      const { id } = user
      const active = user.status !== 'active'
      activeTravelAgencyUser({ id, active }).then(res => {
        this.$message.success('操作成功')
        this.getTravelAgencyUser(this.pagination.pageNum)
      })
    },
    deleteUser (id) {
      deleteTravelAgencyUserById(id).then(res => {
        this.$message.success('操作成功')
        this.getTravelAgencyUser(this.pagination.pageNum)
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
