<template>
  <div class="form-wrap">
    <el-form
      class="search-box"
      ref="form"
      :model="form"
      :inline="true"
      label-width="120px"
    >
      <div class="block-title">
        查询条件
      </div>
      <el-form-item
        label="姓名"
        prop="keyWords1"
      >
        <el-input v-model="form.keyWords1"></el-input>
      </el-form-item>
      <el-form-item
        label="手机号"
        prop="keyWords2"
      >
        <el-input v-model="form.keyWords2"></el-input>
      </el-form-item>
      <el-form-item
        :label="agencyName()"
        prop="keyWords3"
      >
        <el-select
          v-model="form.keyWords3"
        >
          <el-option
            label="全部"
            value=""></el-option>
          <el-option
            v-for="item in agencyList"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          >
          </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="scenicName==='仙门山'?'业务证':'导游证'"
        prop="keyWords5"
      >
        <el-input v-model="form.keyWords5"></el-input>
      </el-form-item>
      <el-form-item
        label="状态"
        prop="keyWords6"
      >
        <el-select v-model="form.keyWords6">
          <el-option
            label="全部"
            value=""
          ></el-option>
          <el-option
            label="在线"
            :value="1"
          ></el-option>
          <el-option
            label="下线"
            :value="0"
          ></el-option>
        </el-select>
      </el-form-item>

      <div class="btn-wrap">
        <el-button @click="reset">
          重置
        </el-button>
        <el-button
          type="primary"
          @click="getGuideList"
        >
          搜索
        </el-button>

        <el-button
          type="primary"
          @click="showDialog('new')"
        >
          {{ scenicName==='仙门山'?'创建业务':'创建导游' }}
        </el-button>
      </div>
    </el-form>

    <div class="table-box">
      <div class="block-title">
        {{ scenicName==='仙门山'?'业务列表':'导游列表' }}
      </div>
      <el-table
        border
        stripe
        :data="tableData"
        v-loading="loading"
      >
        <el-table-column
          label="姓名"
          prop="name"
        >
        </el-table-column>
        <el-table-column
          label="手机号"
          prop="phone"
        >
        </el-table-column>
        <el-table-column
          label="身份证"
          prop="idcard"
        >
        </el-table-column>
        <el-table-column
          :label="scenicName==='仙门山'?'业务证':'导游证'"
          prop="tour_card"
        >
        </el-table-column>
        <el-table-column
          :label="agencyName()"
          prop="travelAgencyName"
        >
        </el-table-column>
        <el-table-column
          label="地区"
          prop="area"
        >
        </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="120"
          fixed="right"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="showDialog('edit', scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="deleteGuide(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="getGuideList()"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
    <!-- 编辑导游 -->
    <ElDialog
      :title="dialogTitle"
      width="760px"
      v-model="dialogVisible">
      <EditDialog
        :dialog-type="dialogType"
        :current-item="currentItem"
        :agency-list="agencyList"
        @updateList="getGuideList"
      ></EditDialog>
    </ElDialog>
  </div>
</template>

<script>
import { apiGetGuideList, apiUpdateGuide, apiDeleteGuide } from '@/api/travelAgency'
import ElDialog from '@/components/Dialog'
import EditDialog from './guideQuery/EditDialog'
export default {
  components: {
    ElDialog,
    EditDialog
  },
  data () {
    return {
      loading: false,
      total: 0,
      form: {
        keyWords1: '',
        keyWords2: '',
        keyWords3: '',
        keyWords4: '',
        keyWords5: '',
        keyWords6: '',
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      dialogVisible: false,
      dialogType: 'new',
      currentItem: {}
    }
  },
  computed: {
    dialogTitle () {
      return this.dialogType === 'new' ? '录入导游信息' : '编辑导游信息'
    },
    agencyList () {
      return this.$store.state.app.agencyList
    },
    scenicName () {
      return this.$store.state.user.scenicName
    }
  },
  created () {
    this.getGuideList()
  },
  methods: {

    handleSizeChange (size) {
      this.form.pageSize = size
      this.getGuideList()
    },
    // 获取导游列表
    getGuideList () {
      this.loading = true
      let params = Object.assign({}, this.form)
      if (params.keyWords3 === '全部') params.keyWords3 = ''
      apiGetGuideList(params).then(res => {
        this.total = res.total
        res.list.forEach(item => {
          item.statusText = item.is_valid ? '可用' : '不可用'
        })
        this.tableData = res.list
      }).finally(() => {
        this.loading = false
      })
    },
    reset () {
      this.$refs.form.resetFields()
    },
    showDialog (type, item) {
      this.dialogType = type
      this.currentItem = item
      this.dialogVisible = true
    },
    offSale (data) {
      let form = Object.assign({}, data)
      form.is_valid = 0
      apiUpdateGuide(form).then(res => {
        this.$message.success('操作成功')
        this.getGuideList()
      })
    },
    onSale (data) {
      let form = Object.assign({}, data)
      form.is_valid = 1
      apiUpdateGuide(form).then(res => {
        this.$message.success('操作成功')
        this.getGuideList()
      })
    },
    deleteGuide (item) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        apiDeleteGuide(item).then(res => {
          this.$message.success('删除成功')
          this.getGuideList()
        })
      })
    }
  }
}
</script>
