<template>
  <div class="delivery-setting">

    <div class="model">
      <div class="title">自动发单</div>
      <div class="list">
        <div class="item" v-for="(v,i) in list" :key=i>
          <div class="left">
            <div class="left-top">
              <div class="name">{{v.name}}</div>
              <div @click="setTime(v,i)" class="set-tips">{{v.setContent}}</div>
            </div>
            <div class="left-bot">{{v.tips}}</div>
          </div>
          <div class="right">
            <template v-if="v.value">
              <div v-if="i===1" :class="['time', v.value ? '' : 'time1']">顾客下单{{v.time}}分钟后</div>
              <div v-if="i===2" :class="['time', v.value ? '' : 'time1']">期望送达前{{v.time}}分钟</div>
            </template>
            <el-switch @change="change(v)" v-model="v.value" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
          </div>
        </div>
      </div>
    </div>
    <div class="model">
      <div class="title">配送设置</div>
      <div class="list">
        <div class="item" v-for="(v,i) in list3" :key=i>
          <div class="left">
            <div class="left-top">
              <div class="name">{{v.name}}</div>
              <div @click="setTime(v,i)" class="set-tips">{{v.setContent}}</div>
            </div>
            <div class="left-bot">{{v.tips}}</div>
          </div>
          <div class="right">
            <template v-if="v.value">
              <div v-if="i===1" :class="['time', v.value ? '' : 'time1']">商家发起自配{{v.time}}分钟后</div>
              <div v-if="i===2" :class="['time', v.value ? '' : 'time1']">最便宜运力优先发单{{v.time}}分钟</div>
            </template>
            <el-switch @change="change(v)" v-model="v.value" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
          </div>
        </div>
      </div>
    </div>
    <div class="model">
      <div class="title">同步设置</div>
      <div class="list">
        <div class="item">
          <div class="left">
            <div class="left-top">
              <div class="name">同步商品图片</div>
            </div>
            <div class="left-bot">同步后显示最新的商品图片,7天内只可以同步一次，如遇特殊情况可联系客服。</div>
          </div>
          <div class="right">
            <img @click="syncFoodImg" class="img" src="../../../static/image/update.png" alt="">
          </div>
        </div>
        <div class="item" v-for="(v,i) in list2" :key=i>
          <div class="left">
            <div class="left-top">
              <div class="name">{{v.name}}</div>
            </div>
            <div class="left-bot">{{v.tips}}</div>
          </div>
          <div class="right">
            <el-switch @change="change(v)" v-model="v.value" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
          </div>
        </div>
      </div>
    </div>
    <el-dialog :title="title" @close="centerDialogVisible=false" :visible.sync="centerDialogVisible" width="400px" center>
      <el-form label-width="120px">
        <el-form-item :label="textLabel">
          <el-input size="small" class="auto-time" v-model="time" clearable>
            <template slot="append">分钟</template>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="centerDialogVisible=false">取 消</el-button>
        <el-button size='medium' type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="设置时长" @close="closeLittleMoneyTime" :visible.sync="centerDialogVisible1" width="600px" center>
      <div class="time-list">
        <div class="time">
          <div class="title">
            <div class="title-left">价格最优</div>
            <div class="tips">(设置的时间内先发最便宜的运力，设置上限5分钟)</div>
          </div>
          <div class="list">
            <div @click="chooseTime(0,v)" class="item" :class="[littleMoneyTime === v ? 'active-item' : '']" v-for="(v,i) in timeList" :key="i">{{v}}</div>
          </div>
        </div>
        <div class="time">
          <div class="title">
            <div class="title-left">价格次优</div>
            <el-tooltip :content="content" placement="top" :popper-class="ruleTips">
              <img class="img" src="../../../static/image/icon-help.png" alt="">
            </el-tooltip>
          </div>
          <div class="list">
            <div @click="chooseTime(1,v)" class="item" :class="[littleMoneyTime1 === v ? 'active-item' : '']" v-for="(v,i) in timeList1" :key="i">{{v}}</div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="closeLittleMoneyTime">取 消</el-button>
        <el-button size='medium' type="primary" @click="confirm1">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="设置自动加小费" @close="closeLittleMoneyTime" :visible.sync="centerDialogVisible2" width="600px" center>
      <div class="time-list">
        <div class="time">
          <div class="title">
            <div class="title-left">小费金额</div>
          </div>
          <el-input size="small" class="auto-time" v-model="tipAmount" clearable>
            <template slot="append">元</template>
          </el-input>
        </div>
        <div class="time">
          <div class="title">
            <div class="title-left">触发时间</div>
            <div class="tips">(下单后多长时间无骑手接单开始自动加小费)</div>
          </div>
          <el-input size="small" class="auto-time" v-model="addPriceTime" clearable>
            <template slot="append">分钟</template>
          </el-input>
        </div>
        <div class="time">
          <div class="title">
            <div class="title-left">选择运力</div>
            <div class="tips">(给哪些运力自动加小费)</div>
          </div>
          <el-select v-model="tipRemark" placeholder="请选择运力">
            <el-option v-for="(item,i) in options" :key="i" :label="item" :value="i">
            </el-option>
          </el-select>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="closeLittleMoneyTime">取 消</el-button>
        <el-button size='medium' type="primary" @click="confirm2">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getConfig, updateConfig, syncFoodImg } from "../../api/setting.js";
export default {
  name: "systemSetting",
  data() {
    return {
      list: [
        {
          name: "自动接单",
          setContent: "",
          value: 1,
          field: "openAutoorder",
          tips: "非冲突绑定模式，不支持自动接单",
        },
        {
          name: "自动发单",
          setContent: "设置时长",
          value: 1,
          field: "openAutodelivery",
          tips: "根据设置的时间进行自动发单",
          time: 0,
        },
        {
          name: "预约单自动发单",
          setContent: "设置时长",
          value: 1,
          field: "openBookingAutodelivery",
          tips: "设置的时长为预约单期望送达前多长时间自动呼叫配送",
          time: 0,
        },
        {
          name: "自动加小费",
          setContent: "设置",
          value: 1,
          field: "openTipSwitch",
          tips: "",
          time: 0,
        },
      ],
      list2: [
        {
          name: "订单详情显示出商品图片",
          value: 1,
          field: "showFoodImg",
          tips: "在订单详情的商品显示图片，方便制作时确认",
        },
        {
          name: "同步订单商品给骑手",
          value: 1,
          field: "syncGoodsDetailToDelivery",
          tips: "关闭后骑手将看不到商品详情",
        },
      ],
      list3: [
        {
          name: "系统取消订单重发",
          setContent: "",
          value: 1,
          field: "againOrder",
          tips: "开启后长时间无骑手接单的订单系统取消后进行再次呼叫骑手",
        },
        {
          name: "商家配送自动完成",
          setContent: "设置时长",
          value: 1,
          field: "selfDeliveryAutoFinish",
          tips: "商家自己去送货后多长时间自动完成",
          time: 0,
        },
        {
          name: "省钱模式",
          setContent: "设置时长",
          value: 1,
          field: "littleMoney",
          tips: "开启后将为您优先呼叫费用最低的运力",
        },
        {
          name: "达达四轮车",
          setContent: "",
          value: 1,
          field: "showDadaCar",
          tips: "开启后支持达达四轮车的城市将可以使用达达四轮车运力",
        },
      ],
      centerDialogVisible: false,
      centerDialogVisible1: false,
      centerDialogVisible2: false,
      curIndex: 0,
      time: 0,
      title: "",
      setField: "",
      openField: "",
      openValue: 0,
      timeList: [1, 3, 5],
      timeList1: [1, 2, 3],
      textLabel: "",
      littleMoneyTime: 0,
      littleMoneyTime1: 0,
      tipAmount: 0,
      addPriceTime: 0,
      tipRemark: 0,
      options: ["全部运力", "运力价格最优惠", "运力价格优惠前三"],
      ruleTips: "rule-tips",
      content:
        "例如：价格最优惠的运力设置呼叫时间5分钟，价格次优惠的运力设置呼叫3分钟，那么价格最优惠的运力总计会呼叫8分钟，价格次优惠的运力呼叫3分钟。",
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getConfig();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 生命周期 - 创建之前
  beforeCreate() {},
  // 生命周期 - 挂载之前
  beforeMount() {},
  // 生命周期 - 更新之前
  beforeUpdate() {},
  // 生命周期 - 更新之后
  updated() {},
  // 生命周期 - 销毁之前
  beforeDestroy() {},
  // 生命周期 - 销毁完成
  destroyed() {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
  // 方法集合
  methods: {
    chooseTime(flag, time) {
      flag === 0
        ? (this.littleMoneyTime = time)
        : (this.littleMoneyTime1 = time);
    },
    closeLittleMoneyTime() {
      this.centerDialogVisible1 = false;
      this.centerDialogVisible2 = false;
      this.getConfig();
    },
    confirm1() {
      let littleMoneyTime = `${this.littleMoneyTime}${
        this.littleMoneyTime1 ? "," + this.littleMoneyTime1 : ""
      }`;
      let data = { littleMoneyTime };
      this.updateConfig(data);
    },
    confirm2() {
      if (this.tipAmount <= 1) {
        return this.$message.error("加小费金额必须为正整数！");
      }
      if (this.addPriceTime <= 1) {
        return this.$message.error("加小费触发时间必须为正整数！");
      }
      let data = {
        tipAmount: this.tipAmount,
        addPriceTime: this.addPriceTime,
        tipRemark: this.tipRemark,
      };
      this.updateConfig(data);
    },
    confirm() {
      let data = {};
      if (this.time <= 1) {
        return this.$message.error("时间必须为正整数！");
      }
      switch (this.setField) {
        case "openAutodelivery":
          data = { autodeliveryOrderTime: this.time * 60 };
          break;
        case "openBookingAutodelivery":
          data = { bookingAutodeliveryOrderTime: this.time * 60 };
          break;
        case "selfDeliveryAutoFinish":
          data = { selfDeliveryAutoFinishMinute: this.time };
          break;
        default:
          break;
      }

      this.updateConfig(data);
    },
    setTextLabel() {
      switch (this.setField) {
        case "openAutodelivery":
          this.textLabel = `顾客下单后`;
          break;
        case "openBookingAutodelivery":
          this.textLabel = `期望送达前`;
          break;
        case "selfDeliveryAutoFinish":
          this.textLabel = `商家发起自配后`;
          break;
        default:
          break;
      }
    },
    setTime(v, i) {
      if (!v.value) {
        return this.$message({
          message: "请开启后再设置时间！",
          type: "warning",
        });
      }
      this.setField = v.field;
      if (v.field === "littleMoney") {
        this.centerDialogVisible1 = true;
        return;
      }
      if (v.field === "openTipSwitch") {
        this.centerDialogVisible2 = true;
        return;
      }
      this.setTextLabel();
      this.title = v.name + "时长设置";
      this.curIndex = i;
      this.time = v.time;
      this.centerDialogVisible = true;
    },
    change(e) {
      this.openField = e.field;
      this.openValue = e.value;
      let data = { [e.field]: e.value };
      this.updateConfig(data);
    },
    getConfig() {
      getConfig().then((res) => {
        if (res.code === 200) {
          this.list[1].time = res.data.autodeliveryOrderTime / 60;
          this.list[2].time = res.data.bookingAutodeliveryOrderTime / 60;
          this.list = this.list.map((v) => {
            v.value = res.data[v.field];
            return v;
          });
          this.list2 = this.list2.map((v) => {
            v.value = res.data[v.field];
            return v;
          });
          this.list3[1].time = res.data.selfDeliveryAutoFinishMinute;
          let littleMoneyTime = res.data.littleMoneyTime.split(",");
          this.littleMoneyTime = Number(littleMoneyTime[0]);
          this.littleMoneyTime1 = Number(littleMoneyTime[1]);
          this.list3[2].time = this.littleMoneyTime;
          this.list3 = this.list3.map((v) => {
            v.value = res.data[v.field];
            return v;
          });
          this.tipAmount = res.data.tipAmount;
          this.addPriceTime = res.data.addPriceTime;
          this.tipRemark = Number(res.data.tipRemark);
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
        this.centerDialogVisible = false;
      });
    },
    updateConfig(data) {
      updateConfig(data).then((res) => {
        if (res.code === 200) {
          this.centerDialogVisible1 = false;
          this.centerDialogVisible2 = false;
          this.showSetting();
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
        this.getConfig();
      });
    },
    showSetting() {
      switch (this.openField) {
        case "littleMoney":
          this.openValue ? (this.centerDialogVisible1 = true) : "";
          this.openValue = 0;
          break;
        case "openTipSwitch":
          this.openValue ? (this.centerDialogVisible2 = true) : "";
          this.openValue = 0;
          break;
        default:
          break;
      }
    },
    syncFoodImg() {
      syncFoodImg().then((res) => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: "正在同步！",
          });
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped  type="text/css">
/deep/ .el-button--default:hover {
  background-color: rgba(252, 114, 0, 0.2);
  border-color: rgba(252, 114, 0, 0.2);
  color: #fc7200;
}
/deep/ .el-button--primary {
  background-color: #fc7200;
  border-color: #fc7200;
}

.model {
  .title {
    position: relative;
    font-size: 16px;
    font-weight: bold;
    line-height: 22px;
    color: #333333;
    padding-left: 10px;
    margin-top: 24px;
    .tips {
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      color: #999999;
    }
  }
  .title::before {
    width: 3px;
    height: 16px;
    background: #fc7200;
    border-radius: 2px;
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
  }
  .list {
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #ffffff;
      margin-top: 10px;
      padding: 16px 20px;
      .left {
        display: flex;
        flex-direction: column;
        font-size: 14px;
        font-weight: bold;
        line-height: 20px;
        color: #000000;
        .left-top {
          display: flex;
          align-items: center;
          .set-tips {
            font-weight: 400;
            color: #fc7200;
            margin-left: 10px;
            cursor: pointer;
          }
        }
        .left-bot {
          margin-top: 2px;
          font-size: 12px;
          font-weight: 400;
          line-height: 17px;
          color: #999999;
        }
      }
      .right {
        display: flex;
        align-items: center;
        .time {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 17px;
          color: #333333;
          margin-right: 20px;
        }
        .time1 {
          color: #999999;
        }
        .con {
          font-size: 14px;
          font-weight: 400;
          line-height: 20px;
          color: #fc7200;
          padding-left: 20px;
          cursor: pointer;
        }
        .con1 {
          color: #999999;
        }
        .img {
          width: 20px;
          height: 20px;
          cursor: pointer;
        }
      }
    }
  }
}

.time-list {
  .time {
    margin-bottom: 30px;
    .title {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .title-left {
        font-size: 15px;
        font-weight: bold;
      }
      .tips {
        font-size: 12px;
        color: #999;
      }
      .img {
        width: 20px;
        height: 20px;
        margin-left: 5px;
        cursor: pointer;
      }
    }
    .list {
      display: flex;
      .item {
        width: 50px;
        height: 25px;
        border: 1px solid #999;
        color: #999;
        margin-right: 30px;
        border-radius: 5px;
        text-align: center;
        line-height: 25px;
        cursor: pointer;
      }
      .active-item {
        color: #fff !important;
        background: #fc7200;
        border-color: #fc7200;
      }
    }
  }
}
</style>
<style>
.rule-tips {
  width: 300px !important;
  font-size: 14px !important;
  font-weight: bold;
}
</style>