<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="服务套餐" name="first">
      <div style="display: inline-block;width: 100%;">
        <div style="position: relative;display: inline-block;margin: 10px 0px;">
          <span>套餐名称：</span>
          <el-input
            style="width: 150px;"
            @keydown.enter.native="shopSelect"
            placeholder="请输入套餐名称"
            v-model="setmealName"
          >
          </el-input
          >&nbsp;&nbsp;
        </div>
        <div style="position: relative;display: inline-block;margin: 10px 0px;">
          <span>套餐类型：</span>
          <el-select
            v-model="setmealType"
            placeholder="请选择套餐类型"
            style="width:150px;"
            @change="shopSelect()"
          >
            <el-option label="月度套餐" value="月度套餐"></el-option>
            <el-option label="季度套餐" value="季度套餐"></el-option>
            <el-option label="年度套餐" value="年度套餐"></el-option>
            <el-option label="自定义" value="自定义"></el-option>
          </el-select>
          &nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        <div style="position: relative;display: inline-block;margin: 10px 0px;">
          <span>套餐适用性别：</span>
          <el-select
            v-model="setmealSex"
            placeholder="请选择套餐适用性别"
            style="width:180px;"
            @change="shopSelect()"
          >
            <el-option label="男生专区" value="男生专区"></el-option>
            <el-option
              label="女生专区"
              value="女生专区"
            ></el-option> </el-select
          >&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        <el-button
          style="margin-left:15px;"
          size="mini"
          type="primary"
          icon="document"
          @click="search"
          >查询
        </el-button>
        <el-button
          style="margin-left:15px;"
          size="mini"
          type="primary"
          icon="document"
          @click="clean"
          >重置
        </el-button>
        <el-button
          size="mini"
          type="primary"
          icon="document"
          @click="addSetmeal"
          >添加套餐
        </el-button>
        <el-button
          size="mini"
          type="primary"
          icon="document"
          @click="delSetmeal"
          >批量删除
        </el-button>
        <el-button
          size="mini"
          type="primary"
          icon="document"
          @click="setmealImp"
          >导出
        </el-button>
      </div>

      <el-table
        v-loading="tableDataLoading"
        :data="typeDatas.list"
        row-key="id"
      >
        <el-table-column label="编号" type="index" width="80">
        </el-table-column>
        <el-table-column label="套餐名称" prop="shopName"> </el-table-column>
        <el-table-column prop="shopCover" label="套餐图片" width="150">
          <template slot-scope="scope">
            <div style="display: inline-block; margin: 3px;">
              <el-popover placement="top-start" title="" trigger="hover">
                <img
                  style="width: 50px; height: 50px"
                  :src="scope.row.shopCover"
                  alt=""
                  slot="reference"
                />
                <img
                  style="width: 300px; height: auto"
                  :src="scope.row.shopCover"
                  alt=""
                />
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="套餐id" prop="phone" width="120">
        </el-table-column>

        <el-table-column label="套餐价格" prop="shopTypeName">
        </el-table-column>
        <el-table-column label="套餐内容" prop="putawayFlag"> </el-table-column>

        <el-table-column label="绑定店铺信息" prop="cashDeposit" width="150">
        </el-table-column>
        <el-table-column label="套餐类型" prop="errandMoney" width="150">
        </el-table-column>
        <el-table-column
          label="套餐适用性别"
          prop="distributionDistance"
          width="150"
        >
        </el-table-column>
        <el-table-column label="套餐绑定规则" prop="exemptMinMoney">
        </el-table-column>
        <el-table-column label="时间段" prop="minimumDelivery">
        </el-table-column>
        <el-table-column label="有效期" prop="enableFullReductionFlag">
        </el-table-column>
        <el-table-column label="创建时间" prop="enableFullReductionFlag">
        </el-table-column>
        <el-table-column label="状态" prop="autoSendOrder">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.value"
              active-value="1"
              inactive-value="0"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="230" fixed="right">
          <template slot-scope="scope">
            <el-button
              :disabled="!isAuth('shopsList:update')"
              size="mini"
              type="primary"
              @click="updateMima(scope.row)"
              style="margin: 5px;"
              >编辑
            </el-button>
            <el-button
              :disabled="!isAuth('shopsList:delete')"
              size="mini"
              type="danger"
              @click="deletes(scope.row)"
              style="margin: 5px;"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center;margin-top: 10px;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="limit"
          :current-page="page"
          layout="total,sizes, prev, pager, next,jumper"
          :total="typeDatas.total"
        >
        </el-pagination>
      </div>
    </el-tab-pane>
    <el-tab-pane label="规则配置" name="third">
      <div style="position: relative;display: inline-block;margin: 10px 0px;">
        <span>规格名称：</span>
        <el-input
          style="width: 150px;"
          @keydown.enter.native="shopSelect"
          placeholder="请输入套餐名称"
          v-model="setmealName"
        >
        </el-input
        >&nbsp;&nbsp;
        <el-button
          style="margin-left:15px;"
          size="mini"
          type="primary"
          icon="document"
          @click="searchRule"
          >查询
        </el-button>
        <el-button
          style="margin-left:15px;"
          size="mini"
          type="primary"
          icon="document"
          @click="cleanRule"
          >重置
        </el-button>
        <el-button size="mini" type="primary" icon="document" @click="addRule"
          >添加
        </el-button>
        <el-button
          size="mini"
          type="primary"
          icon="document"
          @click="setRuleImp"
          >导出
        </el-button>
      </div>
      <el-table
        v-loading="tableDataLoading"
        :data="typeDatas1.list"
        row-key="id"
      >
        <el-table-column label="编号" type="index" width="80">
        </el-table-column>
        <el-table-column label="规则名称" prop="shopTypeName">
        </el-table-column>
        <el-table-column label="规则id" prop="shopTypeName"> </el-table-column>
        <el-table-column label="套餐内容" prop="shopTypeName">
        </el-table-column>
        <el-table-column label="规格排序" prop="shopTypeName">
          <template slot-scope="scope">
            <el-input-number v-model="scope.num" label="排序"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="shopTypeName">
        </el-table-column>
        <el-table-column label="状态" prop="autoSendOrder">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.value"
              active-value="1"
              inactive-value="0"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              :disabled="!isAuth('shopsList:update')"
              size="mini"
              type="primary"
              @click="addNotice1(scope.row)"
              style="margin: 5px;"
              >编辑
            </el-button>
            <el-button
              :disabled="!isAuth('shopsList:delete')"
              size="mini"
              type="danger"
              @click="deletes1(scope.row)"
              style="margin: 5px;"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center;margin-top: 10px;float:right">
        <el-pagination
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="limit1"
          :current-page="page1"
          layout="total,sizes, prev, pager, next,jumper"
          :total="typeDatas1.total"
        >
        </el-pagination>
      </div>
    </el-tab-pane>

    <el-dialog
      :title="addSetmealTitle"
      customClass="setmeal"
      :visible.sync="addSetmealVisible"
      :before-close="cancelSetmeal"
    >
      <el-form :model="addSetmealForm">
        <div style="display: flex;">
          <el-form-item label="套餐名称：">
            <el-input
              v-model="addSetmealForm.name"
              style="width:200px;"
              placeholder="请输入套餐名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="套餐价格：">
            <el-input
              v-model="addSetmealForm.price"
              style="width:200px;"
              placeholder="请输入套餐价格"
            ></el-input>
          </el-form-item>
        </div>
        <el-form-item>
          <div
            style="display: flex;align-items: center;margin: 2% 0;flex-flow: wrap;"
          >
            <span style="display: inline-block;text-align: left;"
              >套餐图片：<br />(可上传多张)&nbsp;&nbsp;&nbsp;</span
            >

            <div v-for="(item, index) of potost" :key="index">
              <div style="position: relative;margin: 5px;">
                <img
                  :src="item"
                  class="avatar"
                  style="width:148px;height: 148px;"
                />
                <div @click="handleRemove(index)" class="divhove">
                  <i
                    class="el-icon-delete"
                    style="margin: 0;font-size: 18px;color: #fff;"
                  ></i>
                </div>
              </div>
            </div>
            <div class="imgs">
              <el-upload
                :action="Tupiantou"
                list-type="picture-card"
                :show-file-list="false"
                :on-success="handleUploadSuccess"
                :on-progress="onprogress1"
              >
                <el-progress
                  v-if="percentage1 > 0 && percentage1 < 100"
                  type="circle"
                  :percentage="percentage1"
                >
                </el-progress>
                <i v-else class="el-icon-plus"></i>
              </el-upload>
            </div>
          </div>
        </el-form-item>
        <div>
          <el-form-item label="套餐内容：">
            <el-input
              v-model="addSetmealForm.price"
              style="width:200px;"
              placeholder="请输入套餐内容"
            ></el-input>
            <i
              class="el-icon-circle-plus-outline"
              @click="mealAdd"
              style="margin-left: 15px;font-size: 22px;color: #56a9ff;cursor: pointer;"
            ></i>
            <i
              class="el-icon-delete"
              @click="mealRemove"
              style="margin-left: 15px;font-size: 22px;color: #f56c6c;cursor: pointer;"
            ></i>
          </el-form-item>
          <div style="display: flex;">
            <el-form-item label="绑定店铺及菜品：" style="margin-left: 80px;">
              <el-input
                v-model="addSetmealForm.price"
                style="width:200px;"
                placeholder="请输入套餐内容"
              ></el-input>
            </el-form-item>
            <el-form-item label="该内容实际价格：">
              <el-input
                v-model="addSetmealForm.price"
                style="width:200px;"
                placeholder="请输入套餐内容"
              ></el-input>
              <i
                class="el-icon-circle-plus-outline"
                @click="mealAdd"
                style="margin-left: 15px;font-size: 22px;color: #56a9ff;cursor: pointer;"
              ></i>
              <i
                class="el-icon-delete"
                @click="mealRemove"
                style="margin-left: 15px;font-size: 22px;color: #f56c6c;cursor: pointer;"
              ></i>
            </el-form-item>
          </div>
        </div>
        <div style="display: flex;">
          <el-form-item label="套餐类型：">
            <el-select
              v-model="addSetmealForm.name"
              placeholder="请选择套餐类型"
              style="width:180px;"
            >
              <el-option label="月度套餐" value="月度套餐"></el-option>
              <el-option label="季度套餐" value="季度套餐"></el-option>
              <el-option label="年度套餐" value="年度套餐"></el-option>
              <el-option label="自定义" value="自定义"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间段：">
            <el-date-picker
              style="width: 380px;"
              v-model="addSetmealForm.name"
              type="datetimerange"
              unlink-panels
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              :clearable="false"
            >
            </el-date-picker>
          </el-form-item>
        </div>
        <el-form-item label="有效期：">
          <el-date-picker
            style="width: 380px;"
            v-model="addSetmealForm.name"
            type="datetimerange"
            unlink-panels
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :clearable="false"
          >
          </el-date-picker>
        </el-form-item>
        <div style="display: flex;">
          <el-form-item label="套餐适用性别：">
            <el-select
              v-model="addSetmealForm.name"
              placeholder="请选择套餐适用性别"
              style="width:180px;"
            >
              <el-option label="男生专区" value="男生专区"></el-option>
              <el-option label="女生专区" value="女生专区"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单生成预约单时间：">
            选择的时间前
            <el-input
              v-model="addSetmealForm.price"
              style="width:100px;"
              placeholder=""
            ></el-input>
            小时（保留一位小数）
          </el-form-item>
        </div>
        <el-form-item label="套餐绑定规则：">
          <el-input
            v-model="addSetmealForm.price"
            style="width:100px;"
            placeholder=""
          ></el-input>
        </el-form-item>
        <el-form-item
          label="套餐状态："
          style="display: flex;align-items: center;"
        >
          <el-switch
            style="display: block"
            v-model="addSetmealForm.price"
            active-color="#13ce66"
            active-text="启用"
            inactive-text="关闭"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSetmeal">取 消</el-button>
        <el-button type="primary" @click="amendSetmeal">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="addRuleTitle"
      customClass="setRule"
      :visible.sync="addRuleVisible"
      :before-close="cancelRule"
      center
    >
      <el-form :model="addRuleForm">
        <el-form-item label="排序：">
          <el-input-number
            v-model="addRuleForm.num"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="规则名称：">
          <el-input
            v-model="addRuleForm.name"
            style="width:200px;"
            placeholder="请输入规则名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="规则内容：">
          <el-input
            v-model="addSetmealForm.name"
            style="width:450px;"
            placeholder="请输入规则内容"
            type="textarea"
            :rows="6"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelRule">取 消</el-button>
        <el-button type="primary" @click="amendRule">确 定</el-button>
      </div>
    </el-dialog>
  </el-tabs>
</template>

<script>
import { jsonp } from "vue-jsonp";
import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode
} from "element-china-area-data";
var geocoder,
  map,
  markersArray = [];
export default {
  data() {
    return {
      activeName: "first",
      setmealName: "",
      setmealType: "",
      setmealSex: "",
      limit: 10,
      page: 1,
      tableDataLoading: false,
      typeDatas: {
        list: [],
        total: 10
      },

      limit1: 10,
      page1: 1,
      typeDatas1: {
        list: [],
        total: 10
      },

      // 添加套餐
      addSetmealVisible: false,
      addSetmealTitle: "",
      addSetmealForm: {
        name: "",
        price: ""
      },
      potost: [],
      percentage1: 0, //进度条

      addRuleTitle: "",
      addRuleVisible: false,
      addRuleForm: {
        num: 1,
        name: ""
      }
    };
  },
  methods: {
    // tabs切换
    handleClick(tab, event) {
      if (tab._props.label == "服务套餐") {
        this.page = 1;
        this.limit = 10;
        this.dataSelect();
      }
      if (tab._props.label == "规则配置") {
        this.page1 = 1;
        this.limit1 = 10;
        this.dataSelect1();
      }
    },

    handleSizeChange(val) {
      this.limit = val;
      this.dataSelect();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.dataSelect();
    },

    handleSizeChange1(val) {
      this.limit1 = val;
      this.dataSelect1();
    },
    handleCurrentChange1(val) {
      this.page1 = val;
      this.dataSelect1();
    },

    // 查询
    select() {
      this.page = 1;
      this.dataSelect();
    },

    // 获取商户数据
    dataSelect() {
      //   this.tableDataLoading = true;
      //   this.$http({
      //     url: this.$http.adornUrl("admin/goods/selectAllShop"),
      //     method: "get",
      //     params: this.$http.adornParams({
      //       page: this.page,
      //       limit: this.limit,
      //       shopName: this.shopName1,
      //       region: this.region,
      //       isActivity: this.isActivity
      //     })
      //   }).then(({ data }) => {
      //     this.tableDataLoading = false;
      //     for (var i in data.data.list) {
      //       if (data.data.list[i].shopBanner) {
      //         data.data.list[i].shopBanner = data.data.list[i].shopBanner.split(
      //           ","
      //         );
      //       }
      //     }
      //     let returnData = data.data;
      //     this.typeDatas = returnData;
      //     console.log(this.typeDatas, "ll");
      //   });
    },
    search() {},
    clean() {},

    //上传成功
    handleUploadSuccess(file, fileList) {
      // this.goodsPicture += file.data + ','
      console.log(file, "轮播图上传成功");
      // if(this.potost.length>=4){
      //   this.potost.shift()
      // }
      this.potost.unshift(file.data);
    },
    onprogress1(event, file, fileList) {
      console.log("详情图上传进度", parseInt(event.percent));
      this.percentage1 = parseInt(event.percent);
    },
    handleRemove(index) {
      this.potost.splice(index, 1);
      console.log("this.potost", this.potost);
    },

    // 添加套餐内容
    mealAdd() {},
    // 删除套餐内容
    mealRemove() {},

    // 添加套餐
    addSetmeal() {
      this.addSetmealVisible = true;
      this.addSetmealTitle = "添加套餐";
    },
    delSetmeal() {},
    cancelSetmeal() {
      this.addSetmealVisible = false;
    },
    amendSetmeal() {
      console.log("确定");
    },
    setmealImp() {},

    // 规则配置
    searchRule() {},
    cleanRule() {},
    dataSelect1() {
      //   this.tableDataLoading = true;
      //   this.$http({
      //     url: this.$http.adornUrl("admin/goods/selectAllShop"),
      //     method: "get",
      //     params: this.$http.adornParams({
      //       page: this.page,
      //       limit: this.limit,
      //       shopName: this.shopName1,
      //       region: this.region,
      //       isActivity: this.isActivity
      //     })
      //   }).then(({ data }) => {
      //     this.tableDataLoading = false;
      //     for (var i in data.data.list) {
      //       if (data.data.list[i].shopBanner) {
      //         data.data.list[i].shopBanner = data.data.list[i].shopBanner.split(
      //           ","
      //         );
      //       }
      //     }
      //     let returnData = data.data;
      //     this.typeDatas = returnData;
      //     console.log(this.typeDatas, "ll");
      //   });
    },
    // 添加套餐
    addRule() {
      this.addRuleVisible = true;
      this.addRuleTitle = "添加规则";
    },
    delRule() {},
    cancelRule() {
      this.addRuleVisible = false;
    },
    amendRule() {
      console.log("确定");
    },
    setRuleImp() {}
  },
  mounted() {
    this.dataSelect();
  }
};
</script>

<style scope>
.imgs {
  position: relative;
  border-radius: 6px;
  width: 148px;
  height: 148px;
  margin-right: 10px;
  display: inline-block;
}

.dels {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.dels .el-icon-delete {
  line-height: 148px;
  padding-left: 58px;
  font-size: 25px;
  color: #fff;
}

.imgs:hover .dels {
  width: 100%;
  height: 100%;
  background: #000;
  display: block;
  opacity: 0.5;
}

.bqList {
  padding: 4px 14px;
  margin: 4px;
  border: 1px solid #efefef;
  font-size: 12px;
  color: #999;
  border-radius: 4px;
  margin-right: 15px;
}

.delss {
  display: none;
  position: relative;
}

.delss .el-icon-delete {
  position: absolute;
  top: 0;
}

.bqList:hover .delss {
  display: initial;
  opacity: 0.5;
}

.tj {
  padding: 6px !important;
  margin: 4px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.divs img {
  width: 100%;
}
/* //参与活动 */
.canquxiao {
  margin-top: 20px;
  margin-left: 287px;
  width: 76px;
  height: 35px;
  opacity: 1;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 1);
  font-size: 16px;
  font-weight: 400;
  line-height: 35px;
  color: rgba(0, 0, 0, 1);
  text-align: center;
}
.canqueding {
  margin-top: -35px;
  margin-left: 407px;
  width: 76px;
  height: 35px;
  opacity: 1;
  border-radius: 5px;
  background: rgba(62, 142, 247, 1);
  font-size: 16px;
  font-weight: 400;
  line-height: 35px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
}
.setmeal {
  width: 1000px;
  margin: 45px auto !important;
}
.setmeal .el-form-item {
  display: flex;
  margin: 0 40px 20px 0;
}
.setmeal .divhove {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: default;
  text-align: center;
  padding-top: 43%;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.setmeal .divhove:hover {
  opacity: 0.8;
}

.setRule{
  width: 600px;
}
</style>
