<template>
  <ContainerTit>
    <div slot="headr">
      <el-button type="primary" @click="submitData">保存</el-button>
    </div>
    <div class="page-div">
      <el-form
        ref="selffetch_form"
        class="d-tem-form"
        style="margin-top: 20px"
        :model="selffetch_form"
        :rules="form_rule"
        label-width="180px"
        size="small"
      >
        <el-form-item label="自提点名称:" prop="name">
          <el-input
            v-model="selffetch_form.name"
            maxlength="10"
            show-word-limit
            style="width: 380px"
            placeholder="请输入自提点名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属商铺：" prop="shopId">
          <SelectShop
            v-model="selffetch_form.shopId"
            :clearable="false"
            :is-default="true"
            placeholder="选择商铺"
            @default="shopDefault"
            @change="selShop"
          />
        </el-form-item>
        <el-form-item label="自提点图片:" prop="image">
          <UploadQiniu
            :width="100"
            is-btn="picture"
            :file-list="img_list"
            @uploadSuccess="uploadSuccess"
          />
          <p class="form-tip">建议上传图片尺寸比例为1:1</p>
        </el-form-item>
        <el-form-item label="自提点位置:" prop="provinceCode">
          <RegionSelect
            v-model="region"
            size="small"
            style="margin-bottom: 10px; width: 380px"
            @change="contactChange"
          />
          <br />
          <el-input
            v-model="selffetch_form.address"
            placeholder="详细地址，例如楼牌、门号"
            style="width: 380px"
          >
            <!--<el-button
            slot="append"
            @click="searchMap"
          >
            搜索地图
          </el-button>-->
          </el-input>
        </el-form-item>
        <!-- <el-form-item label="地图定位:">
        <baidu-map
          class="bm-view"
          :scroll-wheel-zoom="true"
          :center="location"
          :zoom="zoom"
          @click="getLocationPoint"
        >
          <bm-view style="width: 100%; height:400px; flex: 1"></bm-view>
          <bm-local-search
            :keyword="mapCenter"
            :auto-viewport="true"
            style="display: none"
          ></bm-local-search>
          &lt;!&ndash;              缩放&ndash;&gt;
          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        </baidu-map>
      </el-form-item>-->
        <el-form-item label="联系人:" prop="concatName">
          <el-input
            v-model="selffetch_form.concatName"
            style="width: 380px"
            placeholder="联系人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话:" prop="mobile">
          <el-input
            v-model="selffetch_form.mobile"
            style="width: 380px"
            placeholder="联系电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="营业时间:" prop="saleTimeType">
          <el-radio-group v-model="selffetch_form.saleTimeType">
            <el-radio :label="4">全天</el-radio>
            <el-radio :label="5">自定义</el-radio>
          </el-radio-group>
          <div v-if="selffetch_form.saleTimeType === 5">
            <el-time-picker
              v-model="saleTime"
              format="HH:mm"
              is-range
              style="width: 380px"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              @change="saleTimeChange"
            ></el-time-picker>
          </div>
          <div>
            <el-checkbox-group v-model="selffetch_form.day">
              <el-checkbox
                v-for="(item, index) in day_list"
                :key="index"
                :label="item"
              >
                {{ item }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </ContainerTit>
</template>

<script>
  import SelectShop from "@/component/goods/SelectShop.vue";
  import RegionSelect from "@/component/common/RegionSelectJSON";
  import UploadQiniu from "@/component/common/UploadQiniu.vue";
  import { getSelfRuleInfo, setSelfData } from "@/api/System";
  export default {
    name: "AddSelffetch",
    components: {
      UploadQiniu,
      SelectShop,
      RegionSelect,
    },
    data() {
      const checkSaleTime = (rule, value, callback) => {
        if (!this.selffetch_form.day.length) {
          callback(new Error("请选择营业日"));
        } else if (value === 5 && !this.selffetch_form.startTime) {
          callback(new Error("请选择营业时间"));
        } else {
          callback();
        }
      };
      return {
        sel_shop: false,
        zoom: 12.8,
        location: {
          lng: 116.404,
          lat: 39.915,
        },
        img_list: [],
        region: [],
        mapCenter: "",
        contactName: "",
        day_list: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
        form_rule: {
          name: [
            { required: true, message: "请输入自提点名称", trigger: "blur" },
          ],
          concatName: [
            { required: true, message: "请输入联系人", trigger: "blur" },
          ],
          mobile: [
            { required: true, message: "请输入联系电话", trigger: "blur" },
          ],
          shopId: [
            { required: true, message: "请选择所属商铺", trigger: "change" },
          ],
          provinceCode: [
            { required: true, message: "请选择自提点位置", trigger: "change" },
          ],
          saleTimeType: [
            { required: true, validator: checkSaleTime, trigger: "change" },
          ],
          image: [
            { required: true, message: "请上传自提点图片", trigger: "change" },
          ],
        },
        saleTime: "",
        selffetch_id: "",
        selffetch_form: {
          name: "",
          shopName: "",
          shopId: "",
          image: "",
          provinceCode: "",
          cityCode: "",
          districtCode: "",
          provinceName: "",
          cityName: "",
          districtName: "",
          address: "",
          concatName: "",
          saleTimeType: 5,
          day: [],
          startTime: "",
          endTime: "",
        },
      };
    },
    created() {
      if (this.$route.params.id) {
        this.selffetch_id = this.$route.params.id;
        this.getSelfRuleInfo();
      }
    },
    methods: {
      // 获取自提点详情
      async getSelfRuleInfo() {
        if (!this.$accessCheck(this.$Access.DeliverySetgetSelfRuleInfo)) {
          return;
        }
        const { data } = await getSelfRuleInfo(this.selffetch_id);

        this.selffetch_form = data.setData;
        this.region = [
          data.setData.provinceCode,
          data.setData.cityCode,
          data.setData.districtCode,
        ];
        this.saleTime = [
          new Date("1970/01/01" + "  " + data.setData.startTime + ":00"),
          new Date("1970/01/01" + "  " + data.setData.endTime + ":00"),
        ];
        this.img_list = [
          {
            name: "",
            url: data.setData.image,
          },
        ];
      },
      // 提交保存
      submitData() {
        this.$refs.selffetch_form.validate(async (valid) => {
          if (valid) {
            if (this.selffetch_id) {
              this.selffetch_form.id = this.selffetch_id;
            }

            const data = await setSelfData(this.selffetch_form);

            this.$message.success("新建成功");
            this.$closeCurrentGoEdit(
              "/SystemSettings/jiaoyiset/SelffetchList/" +
                this.$route.params.deiId
            );
          }
        });
      },
      uploadSuccess(val) {
        this.selffetch_form.image = val;
        this.img_list = [
          {
            name: "",
            url: val,
          },
        ];
      },
      contactChange(val, params) {
        this.selffetch_form.provinceCode = val[0];
        this.selffetch_form.cityCode = val[1];
        this.selffetch_form.districtCode = val[2];
        this.selffetch_form.provinceName = params[0].label;
        this.selffetch_form.cityName = params[1].label;
        this.selffetch_form.districtName = params[2].label;
      },
      saleTimeChange(val) {
        const time = val.map((item) => {
          return this.$_common.formatDate(item.getTime(), "hh:mm");
        });

        this.selffetch_form.startTime = time[0];
        this.selffetch_form.endTime = time[1];
      },
      selShop(val, row) {
        this.selffetch_form.shopName = row[0].name;
      },
      shopDefault(val, row) {
        if (!this.selffetch_id) {
          this.selffetch_form.shopId = val;
          this.selffetch_form.shopName = row.name;
        }
      },
      searchMap() {
        this.mapCenter = this.contactName + this.selffetch_form.address;
      },
      getLocationPoint(e) {
        this.lng = e.point.lng;
        this.lat = e.point.lat;
        /* 创建地址解析器的实例 */
        let geoCoder = new BMap.Geocoder();
        // /* 获取位置对应的坐标 */
        // geoCoder.getPoint(this.addressKeyword, point => {
        //   this.selectedLng = point.lng
        //   this.selectedLat = point.lat
        // })
        /* 利用坐标获取地址的详细信息 */
        geoCoder.getLocation(e.point, (res) => {
          console.log(res);
        });
      },
    },
  };
</script>

<style scoped>
  .bm-view {
    width: 900px;
    height: 400px;
  }
</style>
