<template>
  <div class="divBox">
    <el-card class="box-card">
      <!--顶部搜索栏-->
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form inline size="small" label-width="80px">
            <el-form-item label="搜索：">
              <el-input v-model="tableFrom.uid" placeholder="请输入用户ID" class="selWidth" clearable />
              <el-input v-model="tableFrom.address" placeholder="请输入地址" class="selWidth" clearable>
                <el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getList(1)" />
              </el-input>
            </el-form-item>
             <el-form-item class="width100">
               <el-button size="small" type="primary" @click="addPickupPoint(0)">添加酒道馆</el-button>
             </el-form-item>
          </el-form>
        </div>
      </div>
      <!--表格信息-->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="酒道馆管理" name="list">
          <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="mini">
            <el-table-column prop="id" label="ID" min-width="100" align="center"/>
            <el-table-column label="名称" prop="title" align="center"/>
            <el-table-column label="地址" prop="address" align="center"/>
            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.is_show == 1" effect="dark">正常</el-tag>
                <el-tag type="danger" v-else effect="dark">暂停使用</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="负责人数" align="center" min-width="200" >
              <template slot-scope="scope">
                <div class="staff">
                  <div class="block" v-for="(item,index) in Object.values(scope.row.user_list)" :key="index">
                    <img class="avatar" :src="item.avatar || moren" />
                    <div class="info">
                      <div class="name">{{ item.nickname || item.real_name }}</div>
                      <div class="uid">UID：{{ item.uid }}</div>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="添加时间" prop="create_time" min-width="150"  align="center"/>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="primary" @click="addPickupPoint(scope.row.id)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="提货记录" name="record">
          <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="mini">
            <el-table-column prop="id" label="ID" min-width="100" align="center"/>
            <el-table-column label="提货用户" min-width="150" align="center">
              <template slot-scope="scope">
                <div class="user-content">
                  <div class="user-avatar" v-if="scope.row.avatar && scope.row.avatar != 1">
                    <img :src="scope.row.avatar" />
                  </div>
                  <div class="user-info">
                    <div class="nickname">{{ scope.row.nickname }}</div>
                    <div class="user-id">ID：{{ scope.row.uid }}</div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作员" min-width="150" align="center">
              <template slot-scope="scope">
                <div class="user-content">
                  <div class="user-avatar" v-if="scope.row.staff_avatar && scope.row.staff_avatar != 1">
                    <img :src="scope.row.staff_avatar" />
                  </div>
                  <div class="user-info">
                    <div class="nickname">{{ scope.row.staff_nickname }}</div>
                    <div class="user-id">ID：{{ scope.row.staff_uid }}</div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="酒道馆" min-width="150" align="center">
              <template slot-scope="scope">
                {{ scope.row.point_title }}<br />
                {{ scope.row.point_address }}
              </template>
            </el-table-column>
            <el-table-column label="总价值" prop="total_money" min-width="80"  align="center"/>
            <el-table-column label="使用积分" prop="use_integral" min-width="80"  align="center"/>
            <el-table-column label="差价" prop="diff_money" min-width="80"  align="center"/>
            <el-table-column label="实付差价" prop="diff_money_pay" min-width="80"  align="center"/>
            <el-table-column label="兑换时间" prop="create_time" min-width="80"  align="center"/>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <!--分页-->
      <div class="block">
        <el-pagination
          :page-sizes="[20, 40, 60, 80]"
          :page-size="tableFrom.limit"
          :current-page="tableFrom.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>
    <!--编辑弹框-->
    <el-drawer :with-header="false" :size="1000" :visible.sync="drawer_show" direction="rtl" :before-close="handleClose">
      <el-form ref="editInfoField" size="small" :rules="ruleValidate" :model="editInfo" label-width="130px" @submit.native.prevent>
        <el-tabs type="border-card">
          <div class="section">
            <div class="title">酒道馆信息</div>
            <el-row>
              <el-col :span="12">
                <el-form-item label="名称：" prop="title">
                  <el-input v-model="editInfo.title" placeholder="请填写酒道馆名称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="状态：" prop="is_show">
                  <el-switch v-model="editInfo.is_show" :active-value="1" :inactive-value="0" :width="55" active-text="开启" inactive-text="关闭" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="经纬度：" prop="lat">
                  <el-input :value="(editInfo.lat || '') + ',' + (editInfo.lng || '')" readonly enter-button="查找位置" style="width: 100%;" placeholder="请点击查找位置选择位置">
                    <el-button slot="append" style="background: #46a6ff; color: #fff; border-radius: 0 4px 4px 0;" @click="onSearchs" >查找位置</el-button>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="详细地址：" prop="address">
                  <el-input v-model="editInfo.address" placeholder="请填写酒道馆详细地址" />
                </el-form-item>
              </el-col>
            </el-row>
            <div class="title">
              负责人
              <el-button size="small" type="primary" @click="addStaff">添加负责人</el-button>
            </div>
            <div class="staff-list">
              <div class="staff-box" v-for="(item,index) in Object.values(editInfo.user_list)" :key="index">
                <img class="staff-avatar" :src="item.avatar || moren" />
                <div class="staff-info">
                  <div class="staff-name">{{ item.nickname || item.real_name }}</div>
                  <div class="staff-uid">UID：{{ item.uid }}</div>
                </div>
                <el-button type="danger" icon="el-icon-delete" circle @click="closeStaffConfirm(item.uid)"></el-button>
              </div>
            </div>
            <el-button size="small" type="success" @click="submitEditInfo">提交</el-button>
          </div>
        </el-tabs>
      </el-form>
    </el-drawer>
    <!--用户选择-->
    <el-dialog title="负责人选择" :visible.sync="userSelectVisible" width="80%" :before-close="closeStaff">
      <el-card class="box-card">
        <!--顶部搜索栏-->
        <div slot="header" class="clearfix">
          <div class="container">
            <el-form inline size="small" label-width="80px">
              <el-form-item label="">
                <el-input v-model="userTableFrom.nickname" placeholder="请输入用户昵称" class="selWidth" clearable />
                <el-input v-model="userTableFrom.phone" placeholder="请输入用户手机号" class="selWidth" clearable />
                <el-input v-model="userTableFrom.uid" placeholder="请输入用户ID" class="selWidth" clearable>
                  <el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getUserList(1)" />
                </el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!--表格信息-->
        <el-table v-loading="userListLoading" :data="userTableData.data" :key="Object.values(editInfo.uid_list).toString()" style="width: 100%" size="mini">
          <el-table-column label="用户信息" prop="nickname" min-width="300" align="center">
            <template slot-scope="scope">
              <div class="user-content">
                <div class="user-avatar">
                  <img :src="scope.row.avatar || moren" />
                </div>
                <div class="user-info">
                  <div class="nickname">{{ scope.row.nickname }}</div>
                  <div class="user-id">ID：{{ scope.row.uid }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="联系电话" prop="phone" min-width="150" align="center"/>
          <el-table-column label="是否为当前酒道馆负责人" min-width="200" align="center">
            <template slot-scope="scope">
              <el-tag type="success" v-if="Object.values(editInfo.uid_list).includes(String(scope.row.uid))" effect="dark">是</el-tag>
              <el-tag type="info" v-else effect="dark">不是</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="150" align="center">
            <template slot-scope="scope">
              <el-button type="danger" v-if="Object.values(editInfo.uid_list).includes(String(scope.row.uid))" effect="dark" @click="closeStaffConfirm(scope.row.uid)">取消</el-button>
              <el-button type="success" v-else effect="dark" @click="addStaffConfirm(scope.row)">添加</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="block">
          <el-pagination
            :page-sizes="[20, 40, 60, 80]"
            :page-size="userTableFrom.limit"
            :current-page="userTableFrom.page"
            layout="total, sizes, prev, pager, next, jumper"
            :total="userTableData.total"
            @size-change="handleUserSizeChange"
            @current-change="pageUserChange"
          />
        </div>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userSelectVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!--地图定位-->
    <el-dialog
      v-if="modalMap"
      v-model="modalMap"
      :visible.sync="modalMap"
      title="选择位置"
      close-on-click-modal
      class="mapBox"
      custom-class="dialog-scustom"
      :append-to-body='true'
      width="80%"
      top="20px"
    >
      <iframe id="mapPage" width="100%" height="700px" frameborder="0" :src="keyUrl" />
    </el-dialog>


  </div>
</template>

<script>
import {pickupPointList, pickupPointEdit, pickupPointInfo} from '@/api/marketing'
import {userLstApi} from "@/api/user";
import {configApi} from "@/api/system";
export default {
  name: "preSaleProductList",
  components: { },
  data() {
    return {
      moren: require("@/assets/images/f.png"),
      // 编辑弹框
      drawer_show: false,
      editInfo: {
        title: '',
        address: '',
        is_show: 1,
        uid_list: [],
        user_list: {},
      },
      activeName: 'list',
      ruleValidate: {
        title: [{ required: true, message: '请填写酒道馆名称', trigger: 'blur' }],
        lat: [{ required: true, message: '请选择酒道馆经纬度', trigger: 'blur' }],
        address: [{ required: true, message: '请填写酒道馆详细地址', trigger: 'blur' }],
      },
      // 用户选择弹框
      userSelectVisible: false,
      userListLoading: true,
      userTableFrom: {
        page: 1,
        limit: 20,
        nickname: '',
        phone: '',
        uid: ''
      },
      userTableData: {
        data: [],
        total: 0,
      },
      // 列表相关
      listLoading: true,
      tableData: {
        data: [],
        total: 0,
      },
      tableFrom: {
        page: 1,
        limit: 20,
        uid: '',
        address: '',
        title:'',
      },
      loading: false,
      cardLists: [],
      // 定位相关
      modalMap: false,
      mapKey: '',
      keyUrl: '',
      delivery_type: '',
    };
  },
  watch: {},
  mounted() {
    window.addEventListener(
      'message',
      function(event) {
        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        var loc = event.data
        console.log(loc)
        if (loc && loc.module === 'locationPicker') {
          // 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
          window.parent.selectAddress(loc)
        }
      },
      false
    )
    window.selectAddress = this.selectAddress

    this.getList('');
    this.getMapKey();
  },
  methods: {
    // 编辑取货点 - 弹出表单
    addPickupPoint(id){
      if (Number(id) > 0) {
        // 编辑
        let _this = this;
        pickupPointInfo(id)
          .then((res) => {
            _this.editInfo = res.data;
            _this.drawer_show = true;
          })
          .catch((res) => {
            this.$message.error(res.message);
          });
      } else {
        // 添加
        this.editInfo = this.$options.data().editInfo;
        this.drawer_show = true;
      }
    },
    // 编辑取货点 - 关闭表单
    handleClose() {
      this.drawer_show = false;
    },
    // 编辑取货点 - 添加负责人弹框显示
    addStaff(){
      this.getUserList(1);
      this.userSelectVisible = true;
    },
    // 编辑取货点 - 添加负责人弹框关闭
    closeStaff() {
      this.userSelectVisible = false;
    },
    // 编辑取货点 - 获取用户列表及分页相关
    getUserList(num) {
      let _this = this;
      this.userListLoading = true;
      this.userTableFrom.page = num ? num : this.userTableFrom.page;
      userLstApi(this.userTableFrom)
        .then((res) => {
          this.userTableData.data = res.data.list;
          this.userTableData.total = res.data.count;
          this.userListLoading = false;
        })
        .catch((res) => {
          this.userListLoading = false;
          this.$message.error(res.message);
        });
    },
    pageUserChange(page) {
      this.userTableFrom.page = page;
      this.getUserList('');
    },
    handleUserSizeChange(val) {
      this.userTableFrom.limit = val;
      this.getUserList('');
    },
    // 编辑取货点 - 添加负责人
    addStaffConfirm(item){
      this.editInfo.uid_list[String(item.uid)] = String(item.uid);
      this.editInfo.user_list[String(item.uid)] = item;
      this.$forceUpdate();
    },
    // 编辑取货点 - 删除负责人
    closeStaffConfirm(uid){
      delete this.editInfo.uid_list[String(uid)];
      delete this.editInfo.user_list[String(uid)];
      this.$forceUpdate();
    },
    // 编辑取货点 - 提交信息
    submitEditInfo(){
      let _this = this;
      let editInfo = Object.assign({},_this.editInfo);
      editInfo.uid_list = Object.values(editInfo.uid_list);
      delete editInfo.user_list
      this.$refs['editInfoField'].validate(valid => {
        if (valid) {
          pickupPointEdit(editInfo).then((res) => {
            if(res.status == 200){
              _this.$message.success('操作成功');
              _this.handleClose();
              _this.getList(1);
              _this.$forceUpdate();
            }
          }).catch((res) => {
            _this.$message.error(res.message)
          })
        }
      });
    },
    // 获取列表
    getList(num) {
      let _this = this;
      _this.listLoading = true;
      _this.tableFrom.page = num ? num : _this.tableFrom.page;
      pickupPointList(_this.activeName, _this.tableFrom)
        .then((res) => {
          _this.tableData.data = res.data.list;
          _this.tableData.total = res.data.count;
          _this.listLoading = false;
        })
        .catch((res) => {
          _this.listLoading = false;
          _this.$message.error(res.message);
        });
    },
    pageChange(page) {
      this.tableFrom.page = page;
      this.getList('');
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val;
      this.getList('');
    },
    // 切换选项卡
    handleClick(tab, event){
      this.tableData = this.$options.data().tableData;
      this.tableFrom = this.$options.data().tableFrom;

      this.getList(1);
    },
    // 定位处理 - 获取地图key
    getMapKey() {
      configApi().then(res => {
        console.log(res);
        this.mapKey = res.data.tx_map_key
        const keys = res.data.tx_map_key
        this.keyUrl = `https://apis.map.qq.com/tools/locpicker?type=1&key=${keys}&referer=myapp`
        this.delivery_type = res.data.delivery_type
      })
        .catch(res => {
          this.$message.error(res.message)
        })
    },
    // 定位处理
    onSearchs() {
      if (!this.mapKey || this.mapKey == '') this.$message.error('平台未配置腾讯地图KEY')
      else this.modalMap = true
    },
    // 选择经纬度
    selectAddress(data) {
      this.editInfo.lat = data.latlng.lat
      this.editInfo.lng = data.latlng.lng
      this.editInfo.address = data.poiaddress || ''
      this.modalMap = false
      this.$forceUpdate();
    },



  },
};
</script>

<style scoped lang="scss">
.selWidth {
  width: 350px !important;
}
.seachTiele {
  line-height: 35px;
}
.title{
  margin-bottom: 16px;
  color: #17233d;
  font-size: 14px;
  font-weight: bold;
}
.scollhide::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.user-content{
  --user-content-height-: 80px;

  height: var(--user-content-height-);
  width: 100%;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  .user-avatar{
    height: var(--user-content-height-);
    width: var(--user-content-height-);
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    img{
      height: 80%!important;
      width: 80%!important;
      border-radius: 50% !important;
    }
  }
  .user-info{
    width: calc(100% - var(--user-content-height-));
    height: var(--user-content-height-);
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    .nickname{
      width: 100%;
      text-align: left;
      font-size: 15px;
      font-weight: bold;
      line-height: calc(var(--user-content-height- * 65%));
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .user-id{
      width: 100%;
      text-align: left;
      font-size: 13px;
      line-height: calc(var(--user-content-height- * 35%));
    }
  }
}
.marginTop10{
  margin-top: 10px!important;
}
.staff{
  width: 100%;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  .block{
    margin-bottom: 10px;
    margin-right: 10px;
    padding-bottom: 5px;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    border-bottom: 1px solid #CCCCCC;
    width: calc((100% - 15px) / 2);
    align-items: center;
    .avatar{
      width: 35px;
      height: 35px;
      border-radius: 50%;
    }
    .info{
      width: calc(100% - 35px);
      padding-left: 10px;
      .name{
        text-align: left;
        width: 100%;
        font-size: 15px;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .uid{
        text-align: left;
        width: 100%;
        font-size: 13px;
      }
    }
  }
  .block:nth-child(2n){
    margin-right: 0!important;
  }
}
.staff-list{
  width: 100%;
  margin-bottom: 30px;
  .staff-box{
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    width: calc((100% - 20px)/ 3);
    border: 1px solid #CCCCCC;
    box-shadow: 0 0 5px 0px #F6F6F6;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    .staff-avatar{
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
    .staff-info{
      width: calc(100% - (60px + 36px));
      padding-left: 10px;
      .staff-name{
        text-align: left;
        width: 100%;
        font-size: 15px;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .staff-uid{
        text-align: left;
        width: 100%;
        font-size: 13px;
      }
    }
  }
  .staff-box:nth-child(3n){
    margin-right: 0px!important;
  }
}
#mapPage{
  height: calc(100vh - 100px) !important;
}
</style>
