<template>
    <div class="app-container">

        <div class="filter-container">
<!--            <el-select v-model="listQuery.channelId" clearable style="width: 200px" class="filter-item" placeholder="请选择渠道">
                <el-option v-for="type in channels" :key="type.id" :label="type.name" :value="type.id" />
            </el-select>-->
          <el-input v-model="listQuery.name"  style="width: 200px"  class="filter-item" placeholder="请输入服务人员名称"/>
          <el-input v-model="listQuery.phone"  style="width: 200px"   class="filter-item" placeholder="请输入手机号码"/>
          <el-select v-model="listQuery.fraId" style="width: 160px" class="filter-item" placeholder="请选择加盟商" clearable
                     filterable>
            <el-option v-for="item in fras" :key="item.id" :label="item.fraName" :value="item.id"/>
          </el-select>
          <el-select v-model="listQuery.openShopUuid" style="width: 160px" class="filter-item" placeholder="请选择门店" clearable
                     filterable>
            <el-option v-for="item in shops" :key="item.id" :label="item.shopName" :value="item.shopNo"/>
          </el-select>
<!--          <el-input v-model="listQuery.openShopUuid"  class="filter-item"  style="width: 200px" placeholder="请输入门店id"/>-->
            <el-button v-permission="['POST /admin/mtShopPerson/getMtShopPerson']" class="filter-item" type="primary" icon="el-icon-search"
                @click="handleFilter">查找</el-button>
            <el-button v-permission="['POST /admin/mtShopPerson/addShopPerson']" class="filter-item" type="primary" icon="el-icon-edit"
                @click="handleCreate">添加</el-button>
        </div>

        <!-- 查询结果 -->
        <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
            <el-table-column align="center" label="美团服务人员id" prop="serviceTechId" />
            <el-table-column align="center" label="美团门店uuid" prop="openShopUuid" />
            <el-table-column align="center" label="美团门店名称" prop="shopName" />
            <el-table-column align="center" label="服务人员姓名" prop="name" />
            <el-table-column align="center" label="服务人员身份证号" prop="idCard" />
            <el-table-column align="center" label="服务人员手机号" prop="phone" />
            <el-table-column align="center" label="所属加盟商" prop="fraName" />
            <el-table-column align="center" label="状态" prop="deleted">
                <template slot-scope="scope">
                    <span v-if="scope.row.deleted == true">已停用</span>
                    <span v-else>正常</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="新增时间" prop="createTime" />

            <el-table-column align="center" label="操作" min-width="100" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button v-permission="['POST /admin/mtShopPerson/removeMtShopPerson']" type="danger" size="mini"
                        @click="handleDelete(scope.row)">解绑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            @pagination="getList" />

<!--         添加或修改对话框-->
        <el-dialog title="添加美团人员" :visible.sync="dialogFormVisible">
            <el-form ref="dataForm"  :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px"
                style="width: 400px; margin-left:50px;">
              <el-form-item label="美团门店" prop="openShopUuid">
                <el-select v-model="dataForm.openShopUuid" style="width: 300px" class="filter-item" placeholder="请选择门店" clearable
                           filterable>
                  <el-option v-for="item in shops" :key="item.id" :label="item.shopName" :value="item.supplierId"/>
                </el-select>
              </el-form-item>
              <el-form-item label="城市" prop="cityId">
                  <el-select style="width: 300px" class="filter-item" filterable  clearable placeholder="请选择" @change="getWorkerByFraId()" v-model="dataForm.cityId" >
                    <el-option v-for="item in citylist" :key="item.id" :label="item.cityName" :value="item.id"></el-option>
                  </el-select>
              </el-form-item>
                <el-form-item label="加盟商" prop="fraId">
                  <el-select v-model="dataForm.fraId" style="width: 300px" class="filter-item" placeholder="请选择加盟商" clearable
                             filterable @change="getWorkerByFraId()">
                    <el-option v-for="item in fras" :key="item.id" :label="item.fraName" :value="item.id" />
                  </el-select>
                </el-form-item>
                <el-form-item label="服务者" prop="workerId">
                  <el-select v-model="dataForm.workerId" style="width: 300px" class="filter-item" placeholder="请选择加盟商" clearable
                             filterable>
                    <el-option v-for="item in servers" :key="item.id" :label="item.name+' '+item.tel" :value="item.id" />
                  </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button   type="primary" @click="addMtServer">保存</el-button>
            </div>
        </el-dialog>


    </div>
</template>


<script>
import { getMtShopPerson,getAllFras,getMtShop,getFullWorkerInfoByFraId,addMtShopPerson,removeMtShopPerson } from '@/api/mtShopPerson'
import Pagination from "@/components/Pagination";
import {getUserAuthData} from "@/api/order";


export default {
    name: 'Topic',
    components: {Pagination},
    data() {
        return {
            list: [],
            total: 0,
            listLoading: true,
            listQuery: {
                page: 1,
                limit: 20,
                sort: 'create_time',
                order: 'desc'
            },
            fras:[],
            shops:[],
            dialogFormVisible:false,
            dataForm:{
              workerId:''
            },
            servers:[],
            rules: {
              openShopUuid: [
                {required: true, message: "请选择美团门店", trigger: "change"}
              ],
              fraId: [
                {required: true, message: "请选择加盟商", trigger: "change"}
              ],
              workerId: [
                {required: true, message: "请选择服务者", trigger: "change"}
              ],
              cityId: [
                {required: true, message: "请选择城市", trigger: "change"}
              ],
            },
          citylist: [],
        }
    },
    created() {
        this.getList()
        this.getAllFras()
        this.getMtShop()
        this.getCityListData()
    },
    methods: {
        getList() {
            this.listLoading = true
            getMtShopPerson(this.listQuery)
                .then(response => {
                    this.list = response.data.data.list
                    this.total = response.data.data.total
                    this.listLoading = false
                })
                .catch(() => {
                    this.list = []
                    this.total = 0
                    this.listLoading = false
                })
        },
        handleFilter() {
            this.listQuery.page = 1
            this.getList()
        },
        getAllFras() {
          getAllFras().then(res => {
            this.fras = res.data.data
          })
        },
      getMtShop(){
        getMtShop().then(res => {
          this.shops = res.data.data
        })
      },
      getWorkerByFraId(){
          if(this.dataForm.fraId!='' && this.dataForm.cityId!=''){
            getFullWorkerInfoByFraId({fraId : this.dataForm.fraId,cityId: this.dataForm.cityId}).then(res=>{
              this.servers = res.data.data
              this.dataForm.workerId=''
            })
          }
      },
      handleCreate(){
        this.dialogFormVisible=true;
      },
      addMtServer(){
        const loading = this.$loading({
          lock: true,
          text: '请求中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$refs["dataForm"].validate(valid => {
          if (valid) {
            console.log(this.dataForm)
            addMtShopPerson(this.dataForm).then(res=>{
              if(res.data.errno==0){
                this.$message.success(res.data.errmsg)
                this.dialogFormVisible=false;
                this.getList();
              }else {
                this.$message.error(res.data.errmsg)
              }
            }).catch(res=>{
              this.$message.error(res.data.errmsg)
            }).finally(res=>{
              loading.close();
            })
          }else {
            loading.close();
          }
        });

      },
      handleDelete(row){
        const loading = this.$loading({
          lock: true,
          text: '请求中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        let params={
          'id':row.id,
          'serviceTechId':row.serviceTechId,
          'openShopUuid':row.openShopUuid
        }
        removeMtShopPerson(params).then(res=>{
          if(res.data.errno==0){
            this.$message.success(res.data.errmsg);
            this.getList();
          }else {
            this.$message.error(res.data.errmsg)
          }
        }).catch(res=>{
          this.$message.error(res.data.errmsg)
        }).finally(res=>{
          loading.close();
        })
      },
      getCityListData() {
        getUserAuthData()
          .then(res => {
            console.log(res);
            this.citylist = res.data.data.city;
          })
          .catch(err => {
            console.log(err);
          });
      },
    }
}
</script>



<style>
.el-table th.gutter {
    display: table-cell !important;
}

.el-dialog {
    width: 800px;
}
</style>
