<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- 项目列表 -->
      <el-tab-pane label="物料包配置" name="third">
        <div style="display: flex; align-items: center">
          <div style="position: relative; display: inline-block; margin: 5px">
            <span>项目类型：</span>
            <el-select
              clearable
              v-model="classifyId"
              style="width: 150px; margin-left: 10px"
              @change="projectType()"
            >
              <el-option
                v-for="item in materialPackageType"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              >
              </el-option> </el-select
            >&nbsp;&nbsp;
          </div>
          <div style="position: relative; display: inline-block">
            <span>物料包名称：</span>
            <el-input
              style="width: 150px"
              @keydown.enter.native="phoneSelect1"
              placeholder="请输入物料包名称："
              v-model="projectName"
            >
            </el-input
            >&nbsp;&nbsp;
          </div>
          <div
            style="display: flex; justify-content: center; align-items: center"
          >
            <el-button
              style="margin-left: 10px"
              size="mini"
              type="primary"
              icon="document"
              @click="searchDataList"
              >查询
            </el-button>
            <el-button
              style="margin-left: 10px"
              size="mini"
              type="primary"
              icon="document"
              @click="resetSearch"
              >重置 </el-button
            >&nbsp;&nbsp;
            <div style="display: inline-block">
              <el-button
                size="mini"
                type="primary"
                icon="document"
                :disabled="!isAuth('locality:add')"
                @click="addMaterialPackage"
                >添加
              </el-button>
            </div>
          </div>
        </div>
        <el-table v-loading="tableDataLoading" :data="tableData.records">
          <el-table-column prop="id" label="编号" width="80" fixed="left">
          </el-table-column>
          <el-table-column prop="projectType" label="项目类型" fixed="left">
            <template slot-scope="scope">
              {{getDictLabel(scope.row.status)}}
            </template>
          </el-table-column>
          <el-table-column prop="materialName" label="物料包名称" fixed="left">
          </el-table-column>
          <el-table-column prop="goodsName" label="当前绑定商品" fixed="left">
          </el-table-column>
          <el-table-column prop="materialMinimum" label="最低数量">
          </el-table-column>
          <el-table-column prop="detail" label="备注"> </el-table-column>
          <el-table-column label="操作" prop="id" width="250" fixed="right">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                style="margin: 5px"
                :disabled="!isAuth('locality:update')"
                @click="editMaterialPackage(scope.row)"
                >修改
              </el-button>
              <!-- <el-button
                size="mini"
                type="primary"
                style="margin: 5px"
                @click="viewShopDetails()"
                >查看
              </el-button> -->
              <el-button
                size="mini"
                type="danger"
                style="margin: 5px"
                @click="deleteMaterialPackage(scope.row)"
                >删除
              </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, 40]"
            :page-size="limit"
            :current-page="currentPage"
            layout="total,sizes, prev, pager, next,jumper"
            :total="tableData.total"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <!-- 添加、修改项目 -->
      <el-dialog
        :title="titles"
        :visible.sync="addMaterialPackageDialogStauts"
        center
      >
        <div style="margin-bottom: 10px; align-items: center">
          <span style="width: 200px; display: inline-block; text-align: right"
            >项目类型：</span
          >
          <el-select v-model="classType" style="width: 50%">
            <el-option
              v-for="item in materialPackageType"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option> </el-select
          >&nbsp;&nbsp;&nbsp;
        </div>
        <div style="margin-bottom: 10px; display: flex; align-items: center">
          <span style="width: 200px; display: inline-block; text-align: right"
            >物料包名称：</span
          >
          <el-input
            style="width: 50%"
            v-model="materialPackageName"
            type="text"
            placeholder="请输入物料包名称"
          >
          </el-input>
        </div>
        <div style="margin-bottom: 10px; display: flex; align-items: center">
          <span style="width: 200px; display: inline-block; text-align: right"
            >最低数量：</span
          >
          <el-input
            style="width: 50%"
            v-model="materialPackageMinNum"
            type="number"
            min="0"
            placeholder="请输入最低数量"
          >
          </el-input>
        </div>
        <div style="margin-bottom: 10px; display: flex; align-items: center">
          <span style="width: 200px; display: inline-block; text-align: right"
            >商城商品：</span
          >
          <!-- <el-input style="width:50%;" v-model="materialPackageMinNum" type="text" placeholder="请选择商城商品">
                    </el-input> -->
          <el-button
            v-if="addMaterialPackageTag.goodsName.length == 0"
            size="mini"
            type="primary"
            :disabled="!isAuth('shopAdmin:update')"
            @click="addGoodsBtn()"
            >添加商品
          </el-button>
          <el-tag
            v-else
            type="info"
            closable
            @close="closeTag"
            disable-transitions
            >{{ addMaterialPackageTag.goodsName }}</el-tag
          >
        </div>
        <div style="margin-bottom: 10px; display: flex">
          <span style="width: 200px; display: inline-block; text-align: right"
            >备注：</span
          >
          <el-input
            style="width: 50%"
            v-model="materialPackageRemark"
            type="textarea"
            placeholder=""
          >
          </el-input>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addMaterialPackageDialogStauts = false"
            >取 消</el-button
          >
          <el-button type="primary" @click="addMaterialPackageSubmit()"
            >确 定</el-button
          >
        </div>
      </el-dialog>

      <!-- 商城 -->
      <el-dialog title="添加商品" :visible.sync="shopDetailsStatus" center>
        <el-table v-loading="shopDetailsLoading" :data="shopTableDataList">
          <el-table-column fixed prop="id" label="编号" width="80">
          </el-table-column>
          <el-table-column fixed prop="coverImg" label="商品图片">
            <template slot-scope="scope">
              <img :src="scope.row.coverImg" alt="" width="60" height="60" />
            </template>
          </el-table-column>
          <el-table-column prop="type" label="商品类型">
            <template slot-scope="scope">
              <span v-if="scope.row.type == null">暂无分类</span>
              <span v-else>{{ scope.row.type.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="商品标题"> </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                :disabled="!isAuth('shopAdmin:update')"
                @click="addGoods(scope.$index, scope.row)"
                >添加
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-tabs>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import quillConfig from "./quill-config.js";
import axios from "axios";
import { jsonp } from "vue-jsonp";
import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode,
} from "element-china-area-data";
var cityOptions = [];
var geocoder,
  map,
  markersArray = [];
export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      dialogFormVisible9: false,
      dialogWidth: 0,
      size: 10,
      currentPage: 1, //当前页码
      size1: 10,
      page1: 1,
      size2: 10,
      page2: 1,
      page3: 1,
      limit3: 10,
      state: "",
      limit: 10, //每页显示多少条
      classify: 6,
      classifys: 6,
      openValue: 1,
      closeValue: 2,
      openValue1: 0,
      closeValue1: 1,
      openValue2: 1,
      closeValue2: 2,
      title: "",
      type: "",
      name: "",
      keyword: "",
      describes: "",
      checkBoxData: [], //多选框选择的值
      method: "false",
      formLabelWidth: "200px",
      activeName: "third",
      tableDataLoading: true,
      homeData: [],
      homeData1: [
        {
          massageTypeId: 0,
          title: "全部",
        },
      ],
      classify: 2,
      classifyList: [
        // {
        // 	id: '',
        // 	name: '全部'
        // },
        // {
        // 	id: 1,
        // 	name: '线上'
        // },
        {
          id: 2,
          name: "线下",
        },
      ],
      choicenData: [],
      pinglunData: {},
      renwuId: "",
      url: "",
      id: "",
      userId: "",
      artificerName: "",
      myPhone: "",
      massageTypeId: "",
      statusId: "",
      statuss: [
        {
          id: "",
          title: "全部",
        },
        {
          id: 0,
          title: "服务中",
        },
        {
          id: 1,
          title: "待审核",
        },
        {
          id: 2,
          title: "已下架",
        },
        {
          id: 3,
          title: "拒绝",
        },
      ],
      // 发布信息
      myLevel: "", //标题
      orderLevel: "", //接单段位
      userIdss: "", //用户id
      orderTakingArea: "", //接单大区
      homepageImg: "", //封面图
      headImg: "", //主页图
      percentage: 0, //进度条
      percentage2: 0, //进度条
      voiceIntroduce: "", //语音介绍
      gameId: "", //项目id
      oldMoney: "", //发布价格
      money: "", //普通用户价格
      orderLevel: "", //经验
      memberMoney: "", //会员价格
      latitude: "", //纬度
      longitude: "", //经度
      city: "", //市
      orderTakingTime: "",
      status: "", //状态0待审核  1上架  2下架 3驳回 (修改添加不传)
      region: "", //最低项目时间
      unit: "小时",
      phone: "", //电话
      phone1: "",
      pickeroptions: {
        selectableRange: "00:00:01 - 23:59:59",
      },
      value1: "",
      value2: "",

      options: provinceAndCityData,
      storeAddress: [],
      storeAddre: "请选择城市",
      province: "", //省
      district: "", //区
      ids: "", //信息id
      nickName: "",
      nickName1: "",
      nickName2: "",
      userIds: {}, //用户列表
      bq: "", //输入的标签名
      missions: 0,
      shenheId: 0, //审核id
      contents: "", //驳回理由
      dialogVisible: false,
      radio: 0,
      multipleSelection: [],
      campus: "",
      campus1: "",
      campusName: "",
      homeData2: [],
      quillOption: quillConfig,
      statusIdd: 1,
      tableData: {},

      // 师傅分类参数
      labels1: [], //标签集合
      bq: "", //输入的标签名
      city: "", //师傅城市
      contentImg: [], //详情图
      duration: "", //时长
      addNum: "", //加钟次数
      isSex: "", //师傅性别
      applyPeople: "", //适用人群
      labels: "", //标签
      massageImg: "", //图片
      massageTypeId: "", //师傅分类Id
      sales: "", //销量
      massageTypeStatus: "", //师傅分类状态
      massageTypeTitle: "", //标题
      artificerId: "",
      userId1: "",

      classTypeList: [],
      // 加钟项目
      dialogFormVisibleJz: false,
      materialPackageType: [ 
      ],
      classifyId: "",
      classType: "",
      parentId: "",
      tableDataJz: {},
      tableDataLoadingJz: false,
      dialogFormVisibleJzA: false,
      pageJ: 1,
      limitJ: 10,
      dialogFormVisibleXyf: false,
      tableDataLoadingXyf: false,
      tableDataXyf: {},

      dialogFormVisibleBz: false,
      ordersId: "",
      serveTime: "",
      titles: "",
      projectName: "",
      addMaterialPackageDialogStauts: false,
      materialPackageName: "",
      materialPackageMinNum: "",
      materialPackageRemark: "",
      shopDetailsStatus: false,
      shopTableDataList: [],
      shopDetailsLoading: false,
      addMaterialPackageTag: {
        goodsName: "",
        goodsId: "",
      },
      submitStatus: null,
    };
  },
  methods: {
    deleteMaterialPackage(row) {
      this.$http({
        url: this.$http.adornUrl("material/delete"),
        method: "post",
        params: this.$http.adornParams({
          id: row.id,
        }),
      }).then(({ data }) => {
        console.log(`🚀 ~ deleteMaterialPackage ~ data:`, data)
        
        if (data.code == 0) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getMaterialPackageDataList();
        } else {
          this.$notify({
            title: "提示",
            duration: 1800,
            message: data.msg,
            type: "warning",
          });
        }
      });
    },
    //翻译字典（手动）
    getDictLabel(val){
      var list = this.materialPackageType;
      var labelText = "";
      for(var i=0;i<list.length;i++){
        if(val==list[i].id){
          labelText = list[i].value;
          break;
        }
      }
      return labelText;
    },
    //获取字典信息
		getDictOptions() {
			this.$http({
				url: this.$http.adornUrl('sys/dict/list'),
				method: 'get',
				params: this.$http.adornParams({
					'page': 1,
					'limit': 100,
					'parentId': 22,
				})
			}).then(({ data }) => {
				console.log(`🚀 ~ getDictOptions ~ data:`, data)
				if (data && data.code === 0) {
					this.materialPackageType = data.page.list;
				}
			})
		},
    closeTag() {
      this.addMaterialPackageTag.goodsName = "";
      this.addMaterialPackageTag.goodsId = "";
    },
    addGoods(index, row) {
      this.addMaterialPackageTag.goodsName = row.title;
      this.addMaterialPackageTag.goodsId = row.id;
      this.shopDetailsStatus = false;
    },
    addGoodsBtn() {
      this.shopDetailsStatus = true;
    },
    addMaterialPackageSubmit() {
      console.log(this.editRowId);
      if (!this.classType) {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请选择项目类型",
          type: "warning",
        });
        return;
      }
      if (this.materialPackageName == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入物料包名称",
          type: "warning",
        });
        return;
      }
      if (!this.materialPackageMinNum) {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入最低数量",
          type: "warning",
        });
        return;
      }
      // if (!this.addMaterialPackageTag.goodsId) {
      //   this.$notify({
      //     title: "提示",
      //     duration: 1800,
      //     message: "请选择商城商品",
      //     type: "warning",
      //   });
      //   return;
      // }
      this.$http({
        url: this.$http.adornUrl(
          this.submitStatus == 0 ? "material/insert" : "material/update"
        ),
        method: "POST",
        params: this.$http.adornParams({
          id: this.editRowId,
          createUser: this.userId,
          updateUser: this.userId,
          status: this.classType ? this.classType.toString() : this.classType,
          materialMinimum: this.materialPackageMinNum,
          materialName: this.materialPackageName,
          detail: this.materialPackageRemark,
          goodsId: this.addMaterialPackageTag.goodsId,
        }),
      }).then(({ data }) => {
        if (data.code == 0) {
          this.addMaterialPackageDialogStauts = false;
          this.$message({
            message: this.submitStatus == 0 ? "添加成功" : "修改成功",
            type: "success",
          });
          this.getMaterialPackageDataList();
        } else {
          this.$notify({
            title: "提示",
            duration: 1800,
            message: data.msg,
            type: "warning",
          });
        }
      });
    },
    // 查看商品详情
    viewShopDetails() {},
    editMaterialPackage(row) {
      console.log(row.status);
      // this.getMaterialPackageDataList();
      this.addMaterialPackageDialogStauts = true;
      this.titles = "修改物料包";
      this.submitStatus = 1;
      this.classType = row.status;
      this.materialPackageName = row.materialName;
      this.editRowId = row.id;
      let echoGoodsName = this.shopTableDataList.filter(
        (item) => item.id == row.goodsId
      );
      console.log(echoGoodsName);
      this.addMaterialPackageTag.goodsName =
        echoGoodsName.length > 0 ? echoGoodsName[0].title : "";
      this.addMaterialPackageTag.goodsId = row.goodsId;
      this.materialPackageMinNum = Number(row.materialMinimum);
      this.materialPackageRemark = row.detail;
    },
    addMaterialPackage() {
      this.titles = "添加物料包";
      this.submitStatus = 0;
      this.addMaterialPackageDialogStauts = true;
      this.classType = null;
      this.materialPackageName = "";
      this.addMaterialPackageTag.goodsName = "";
      this.addMaterialPackageTag.goodsId = null;
      this.materialPackageMinNum = null;
      this.materialPackageRemark = "";
    },
    handleCurrentChange(e) {
      this.currentPage = e;
      this.getMaterialPackageDataList();
    },
    resetSearch() {
      this.classifyId = null;
      this.projectName = "";
      this.searchDataList();
    },
    searchDataList() {
      this.getMaterialPackageDataList();
    },
    projectType() {},
    handleSizeChange(e) {
      this.limit = e;
      this.getMaterialPackageDataList();
    },
    handleClick(tab, event) {
      this.campus = "";
      this.campus1 = "";
      this.currentPage = 1;
      if (tab._props.label == "师傅列表") {
        this.type = 2;
        this.InformationSelect();
      }

      if (tab._props.label == "项目列表") {
        this.classSelect();
      }
    },
    // 获取商城商品数据
    getShopDataList() {
      this.$http({
        url: this.$http.adornUrl("goods/selectListByType"),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        if (data && data.data) {
          this.shopDetailsLoading = false;
          let returnData = data.data;
          this.shopTableDataList = returnData;
          this.totalnum = returnData.totalElements;
        }
      });
    },
    // 获取物料包列表数据
    getMaterialPackageDataList() {
      this.$http({
        url: this.$http.adornUrl("material/list"),
        method: "get",
        params: this.$http.adornParams({
          page: this.currentPage,
          limit: this.limit,
          status: this.classifyId
            ? this.classifyId.toString()
            : this.classifyId,
          materialName: this.projectName,
        }),
      }).then(({ data }) => {
        console.log("12332hhhh", data);
        if (data.code == 0) {
          this.tableDataLoading = false;
          let returnData = data.data;
          let projectType = null;
          // for (var i in returnData.records) {
          //   if (returnData.records[i].status == 1) {
          //     returnData.records[i].projectType = "中医推拿";
          //   } else {
          //     returnData.records[i].projectType = "精油SPA";
          //   }
          // }
          this.tableData = returnData;
          // for (var i in this.tableData.list) {
          //     if (this.tableData.list[i].contentImg) {
          //         this.tableData.list[i].contentImg = this.tableData.list[i].contentImg
          //             .split(',')
          //     }
          // }
          if (this.tableData.length == 0) {
            this.currentPage = this.currentPage - 1;
            this.classSelect();
          }
        } else {
          this.$notify({
            title: "提示",
            duration: 1800,
            message: data.msg,
            type: "warning",
          });
        }
      });
    },
    // 提交修改、添加项目项目
    refuseto1() {
      return;
      if (this.classType == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请选择项目类型",
          type: "warning",
        });
        return;
      }
      if (this.massageTypeTitle == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入项目名称",
          type: "warning",
        });
        return;
      }
      if (this.massageImg == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请上传项目图片",
          type: "warning",
        });
        return;
      }
      if (this.contentImg.length == 0) {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请上传项目详情图片",
          type: "warning",
        });
        return;
      }
      if (this.duration === "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入时长",
          type: "warning",
        });
        return;
      }
      if (this.isSex === "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请选择性别要求",
          type: "warning",
        });
        return;
      }
      if (this.applyPeople === "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入适用人群",
          type: "warning",
        });
        return;
      }
      if (this.addNum === "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入加钟次数",
          type: "warning",
        });
        return;
      }

      if (this.massageTypeStatus === "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请选择状态",
          type: "warning",
        });
        return;
      }
      if (this.city == "") {
        var sitys = "不限";
      } else {
        var sitys = this.city;
      }
      console.log("this.city", this.city, "sitys", sitys);
      if (this.titles == "添加项目") {
        var urls = "artificer/insertMassageType";
      } else {
        var urls = "artificer/updateMassageType";
      }
      this.$http({
        url: this.$http.adornUrl(urls),
        method: "post",
        // params: this.$http.adornParams({
        data: this.$http.adornData({
          title: this.massageTypeTitle,
          status: this.massageTypeStatus,
          sales: this.sales,
          massageTypeId: this.massageTypeId,
          massageImg: this.massageImg,
          isSex: this.isSex,
          applyPeople: this.applyPeople,
          duration: this.duration,
          contentImg: this.contentImg.toString(),
          city: sitys,
          labels: this.labels1.toString(),
          classifyId: this.classType,
          addNum: this.addNum,
        }),
      }).then(({ data }) => {
        if (data.code == 0) {
          this.dialogFormVisible9 = false;
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.gameName = "";
              this.classSelect();
            },
          });
        } else {
          this.$message({
            message: data.msg,
            type: "warning",
            duration: 1500,
            onClose: () => {},
          });
        }
      });
    },
  },
  mounted() {
    let userId = window.localStorage.getItem("userId");
    if (userId) this.userId = userId;
    this.getMaterialPackageDataList();
    this.getShopDataList();
    this.getDictOptions();
  },
};
</script>

<style>
.customWidth {
  width: 80% !important;
}

.adver_main.box {
  display: block;
  max-width: 100%;
  text-align: center;
  border: 1px dotted rgba(67, 79, 103, 0.4);
}

.cards {
  padding: 0 8px;
  margin-bottom: 15px;
}

.adver_main.box a {
  display: flex;
  justify-content: center;
  height: 150px;
  line-height: 150px;
  text-decoration: none;
}

.bannerManin {
  border: 1px solid #e8e8e8;
  font-size: 14px;
  padding: 0 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 113px;
  color: rgba(0, 0, 0, 0.65);
}

.bannerManin span {
  display: inline-block;
  margin-left: 5px;
}

.bannerManin img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.bannerbtn {
  display: flex;
  border-top: none !important;
  border: 1px solid #e8e8e8;
  padding: 11px;
  font-size: 14px;
  color: #3e8ef7;
}

.bannerbtn a {
  flex: 1;
  text-align: center;
  color: #3e8ef7 !important;
  text-decoration: none;
}

.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;
}
</style>
