<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="名称" prop="partnerName">
        <el-input
          v-model="queryParams.partnerName"
          placeholder="请输入合作商名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>





      <el-form-item label="状态" prop="isBanned">
        <el-radio-group v-model="queryParams.isBanned">
          <el-radio :label="0">正常</el-radio>
          <el-radio :label="1">封禁</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item style="margin-left: 5%">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:mallPartners:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:mallPartners:remove']"
        >删除</el-button>
      </el-col>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="mallPartnersList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />

      <el-table-column label="店主" align="center" prop="userId" >
        <template slot-scope="scope">


         <div style="display: flex;align-items: center ">
           <div style="margin-right: 5px" >  {{scope.row.realName}}  </div>
           <el-button type="text"  @click="getlistdian(scope.row)">设置</el-button>
         </div>


        </template>
      </el-table-column>
      <el-table-column label="名称" align="center" prop="partnerName" />
      <el-table-column label="合作商Logo" align="center" prop="partnerLogo" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.partnerLogo" :width="50" :height="50"/>
        </template>
      </el-table-column>
      <el-table-column label="店铺展示图" align="center" prop="shopImages" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.shopImages" :width="50" :height="50"/>
        </template>
      </el-table-column>
      <el-table-column label="联系电话" align="center" prop="contactNumber" />
      <el-table-column label="详细地址" align="center" prop="address" />

<!--
-->
      <el-table-column label="评分" align="center" prop="averageScore" />

      <el-table-column label="店铺描述" align="center" prop="remark" />
      <el-table-column label="营业时间" align="center" prop="workTime" />
      <el-table-column label="销量" align="center" prop="salesNum" />
      <el-table-column label="排序" align="center" prop="orderNum" />
      <el-table-column label="评论" align="center" prop="isBanned" >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="chakanpinglun(scope.row.partnerId)"
            v-hasPermi="['system:mallPartners:edit']"
          >查看</el-button>

        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="isBanned" >
        <template slot-scope="scope">
          <el-button type="success" @click="getfj(scope.row)" v-if="scope.row.isBanned == '0'">正常</el-button>
          <el-button type="danger"  @click="getfj(scope.row)"  v-if="scope.row.isBanned == '1'">封禁</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:mallPartners:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:mallPartners:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="选择店主" :visible.sync="dialogTableVisible">
     <div style="display: flex;align-items: center; margin: 15px auto;">
       <div style="width: 70%;margin-right: 10px">
         <el-input v-model="queryParamsx.mobile" placeholder="请输入手机号搜索" ></el-input>
       </div>

       <el-button type="primary" icon="el-icon-search"  @click="getUserList()">搜索</el-button>
     </div>
      <el-table :data="userList">
        <el-table-column property="id" label="账号信息" width="150"></el-table-column>
        <el-table-column property="nickname" label="真实姓名" width="150"></el-table-column>
        <el-table-column property="mobile" label="手机号" width="200"></el-table-column>
        <el-table-column label="操作" align="center"  >
          <template slot-scope="scope">
            <el-button type="primary" @click="getcaozuo(scope.row.userId)">设为店主</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="forpinglunUser"
      />
    </el-dialog>




    <!-- 添加或修改合作商管理对话框 点击新增弹出 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">

        <el-form-item label="合作商名称" prop="partnerName">
          <el-input v-model="form.partnerName" placeholder="请输入合作商名称" />
        </el-form-item>
        <el-form-item label="合作商Logo" prop="partnerLogo">
          <image-upload v-model="form.partnerLogo"/>
        </el-form-item>
        <el-form-item label="店铺展示图" prop="shopImages">
          <image-upload v-model="form.shopImages"/>
        </el-form-item>
        <el-form-item label="联系电话" prop="contactNumber">
          <el-input v-model="form.contactNumber" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入详细地址" />
        </el-form-item>
        <el-form-item label="选择位置" prop="province">
          <el-button type="primary" icon="el-icon-location-outline"
                     @click="chooseLatLng('group',form.latitude,form.longitude)"></el-button>
        </el-form-item>
        <div class="mapPop" v-show="mapOpen" style="z-index: 999">
          <div class="title">单击位置选点，用于小程序导航使用 <span @click="mapOpen = false">X</span></div>
          <div id="map" style="width: 800px;height: 500px"></div>
        </div>



        <el-form-item label="店铺描述" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入店铺描述" />
        </el-form-item>
        <el-form-item label="营业时间" prop="workTime">
          <el-input v-model="form.workTime" placeholder="请输入营业时间" />
        </el-form-item>

        <el-form-item label="排序" prop="orderNum">
          <el-input v-model="form.orderNum" placeholder="请输入排序" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="评论列表" :visible.sync="dialogTableVisibles">
      <el-table :data="pinglunlist">
        <el-table-column property="commentDesc" label="评论" width="300"></el-table-column>
        <el-table-column property="commentStar" label="评分" width="150">
          <template slot-scope="scope">
          <div>{{scope.row.commentStar}}</div>
<!--            scope.row.commentStar-->
          </template>
        </el-table-column>
        <el-table-column property="realName" label="姓名" width="200"></el-table-column>
        <el-table-column property="commentTime" label="时间"></el-table-column>
        <el-table-column property="id" label="操作">
          <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="pinglundelete(scope.row.id)"
            v-hasPermi="['system:mallPartners:remove']"
          >删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <pagination
        v-show="pltotal>0"
        :total="pltotal"
        :page.sync="plfye.pageNum"
        :limit.sync="plfye.pageSize"
        @pagination="forpinglun()"
      />
    </el-dialog>
  </div>
</template>

<script>
  import { listUser,} from "@/api/system/user";
  import {pinglunshanchu, pinglun, fjPartners, listMallPartners, getMallPartners, delMallPartners, addMallPartners, updateMallPartners,listCategory } from "../api/Partner";
  import {addDateRange} from '@/utils/ruoyi.js'
  // 引入加载TXMap的方法
 // import TMap from "@/utils/initMap";
  export default {
    name: "MallPartners",
    data() {
      return {
        value:true,
        mapOpen:false,
        mapType: null,
        centerPoint: {
          latitude: 39.984120,
          longitude: 116.307484
        },
        shopconfigList: [],
        shopConfig: {},
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 合作商管理表格数据
        mallPartnersList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        plfye:{
          pageNum: 1,
          pageSize: 10,
        },
        pltotal:0,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          userId: null,
          type: null,
          partnerName: null,
          partnerLogo: null,
          shopImages: null,
          contactNumber: null,
          address: null,
          province: null,
          city: null,
          area: null,
          partnerCategoryId: null,
          averageScore: null,
          longitude: null,
          latitude: null,
          workTime: null,
          salesNum: null,
          orderNum: null,
          isBanned: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          userId: [
            { required: true, message: "用户id不能为空", trigger: "blur" }
          ],
          partnerName: [
            { required: true, message: "合作商名称不能为空", trigger: "blur" }
          ],
          partnerLogo: [
            { required: true, message: "合作商Logo不能为空", trigger: "blur" }
          ],
          shopImages: [
            { required: true, message: "店铺展示图不能为空", trigger: "blur" }
          ],
          contactNumber: [
            { required: true, message: "联系电话不能为空", trigger: "blur" }
          ],
          address: [
            { required: true, message: "详细地址不能为空", trigger: "blur" }
          ],
        },
        options: [],
        //需要传给商家分类id的
        queryParamss: {
          pageNum: 1,
          pageSize: 9999,
          pid: null,
          categoryName: null,
          orderNum: null
        },
        gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        userList:[],
        pinglunlist:[],
        dialogTableVisibles:false,
        dialogTableVisible: false,
        queryParamsx: {
          pageNum: 1,
          pageSize: 10,
          userName: undefined,
          mobile: undefined,
          status: undefined,
          deptId: undefined
        },
        dateRange: [],
        linglist:{},
      //  ----
      };
    },
    created() {
      this.getList();
    },
    mounted() {
      //this.mapInit()
    },
    methods: {
      pinglundelete(id){
        console.log(id)
        let data = {
          orderId :id
        }
        pinglunshanchu(data).then(res=>{
          console.log(res)
          this.$modal.msgSuccess("修改成功");
        })
      },
      getlistdian(row){
        // console.log(row)

        this.linglist = row
        this.dialogTableVisible = true
        this.getUserList()

      },
      getcaozuo(userid){
        console.log(userid)
        this.linglist.userId = userid
        updateMallPartners(this.linglist).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.open = false;
          this.getList();
        });

      },
      getfj(row){
        console.log(row.isBanned,'1111')
        if (row.isBanned=='1'){
          row.isBanned='0'
        }else if(row.isBanned=='0'){
          row.isBanned='1'
        }
        console.log(row.isBanned,'222')
        fjPartners(row).then(res =>{
          this.$message.success("成功")
          this.getList()
        })
      },
      chakanpinglun(id){
        this.partnerId = id
        let data = {
          partnerId : this.partnerId,
          pageNum: this.plfye.pageNum,//第几页
          pageNo: this.plfye.pageNum,//第几页
          pageSize: this.plfye.pageSize,//一页多少张
        }
        this.dialogTableVisibles = true
        pinglun(data).then(res=>{
          console.log(res)
          this.pinglunlist = res.rows
          this.pltotal = res.total
        })
      },
      forpinglun(){

        let data = {
          partnerId : this.partnerId,
          pageNum: this.plfye.pageNum,//第几页
          pageNo: this.plfye.pageNum,//第几页
          pageSize: this.plfye.pageSize,//一页多少张
        }
        this.dialogTableVisibles = true
        pinglun(data).then(res=>{
          console.log(res)
          this.pinglunlist = res.rows
          this.pltotal = res.total
        })
      },
      forpinglunUser(){

        let data = {
          partnerId : this.partnerId,
          pageNum: this.queryParams.pageNum,//第几页
          pageNo: this.queryParams.pageNum,//第几页
          pageSize: this.queryParams.pageSize,//一页多少张
        }
        listUser(data).then(response => {
          this.userList = response.data.list;
          this.total = response.data.total
        } );

      },

      /** 查询合作商管理列表 */

      getList() {

        this.loading = true;
        listMallPartners(this.queryParams).then(response => {
          this.mallPartnersList = response.rows;
          console.log('查询合作商管理列表 ',this.mallPartnersList)
          this.total = response.total;
          this.loading = false;
        });
        listCategory(this.queryParamss).then(responses => {
          this.options = responses.rows;
        });

      },
      getUserList(){
        // 店主列表
        listUser(addDateRange(this.queryParamsx, this.dateRange)).then(response => {
          this.userList = response.data.list;
          this.total = response.data.total
          this.queryParamsx.mobile = undefined
          // console.log('userlist',response.rows)
        } );
      },
      //获取地址
      mapInit(lat, lng) {
        console.log(lat, lng)
        let that = this;
        let map = new qq.maps.Map(document.getElementById("map"), {
          center: new qq.maps.LatLng(lat, lng),
          zoom: 13
        });
        let marker = new qq.maps.Marker({
          map: map,
          position: new qq.maps.LatLng(lat, lng),
        });

        //添加监听事件
        qq.maps.event.addListener(map, 'click', function (event) {
          console.log('经纬赋值',event.latLng.lat, event.latLng.lng);
          // this.queryParams.longitude = event.latLng.lat
          // this.queryParams.latitude = event.latLng.lng
          // console.log('赋值后', this.queryParams.longitude, this.queryParams.latitude);
          let marker = new qq.maps.Marker({
            map: map,
            position: new qq.maps.LatLng(event.latLng.lat, event.latLng.lng),
          });
          setTimeout(() => {
            that.setValueLatLng(event.latLng.lat, event.latLng.lng)
          }, 500)
        });
      },
      chooseLatLng(type, lat, lng) {
        this.mapOpen = true
        this.mapInit(lat, lng);
        this.mapType = type
      },
      //经纬度
      setValueLatLng(lat, lng) {
        console.log('这一步',lat, lng)
        this.form.latitude=lat
        this.form.longitude=lng
        // if (this.mapType == "group") {
        //   this.form.groupLongitude = lng
        //   this.form.groupLatitude = lat
        // }
        // if (this.mapType == "school") {
        //   this.form.schoolLongitude = lng
        //   this.form.schoolLatitude = lat
        // }
        this.mapOpen = false
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          partnerId: null,
          userId: null,
          type: null,
          partnerName: null,
          partnerLogo: null,
          shopImages: null,
          contactNumber: null,
          address: null,
          province: null,
          city: null,
          area: null,
          partnerCategoryId: null,
          averageScore: null,
          longitude: null,
          latitude: null,
          remark: null,
          workTime: null,
          salesNum: null,
          orderNum: null,
          isBanned: null,
          createTime: null,
          createBy: null,
          updateTime: null,
          updateBy: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.partnerId)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.form.latitude="28.8696310243285"
        this.form.longitude="105.4421806242317"
        this.open = true;
        this.title = "添加合作商管理";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        this.form = row
        this.open = true;
        this.title = "修改合作商管理";

      },
      //id
      getcategoryid(){
        console.log('fenlei', this.form.partnerCategoryId)
      },

      /** 提交按钮 */
      submitForm() {
        if (!this.form.longitude||!this.form.latitude){
          this.$message.warning("请选择位置")
          return
        }
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.partnerId != null) {
              updateMallPartners(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addMallPartners(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const partnerIds = row.partnerId || this.ids;
        this.$modal.confirm('是否确认删除合作商管理编号为"' + partnerIds + '"的数据项？').then(function() {
          return delMallPartners(partnerIds);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('system/mallPartners/export', {
          ...this.queryParams
        }, `mallPartners_${new Date().getTime()}.xlsx`)
      }
    }
  };
</script>
<style  lang="scss">
  .mapPop {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    #map {
      border: 2px solid #d5d5d5;
    }

    .title {
      padding: 10px;
      background-color: #00afff;
      color: #FFF;

      span {
        float: right;
      }
    }
  }
  .dianz{
    cursor:pointer;
    color: #1c84c6;
  }
</style>
