<template>
  <ContainerTit>
    <div slot="headr">
      <el-button
        type="primary"
        :loading="submitLoading"
        @click="onSubmit('formData')"
      >
        保存
      </el-button>
    </div>
    <el-card class="box-card" shadow="never">
      <el-form
        ref="formData"
        :model="formData"
        :rules="rules"
        label-width="200px"
      >
        <el-form-item label="仓库名称：" prop="warehouseName">
          <el-input
            v-model="formData.warehouseName"
            placeholder="仓库名称"
            style="width: 250px"
          ></el-input>
        </el-form-item>
        <el-form-item label="仓库编码：">
          <el-input
            v-model="formData.warehouseCode"
            disabled
            placeholder="自动生成"
            style="width: 250px"
          ></el-input>
        </el-form-item>
        <el-form-item label="关联商铺：">
          <el-input
            v-model="formData.shopName"
            disabled
            placeholder="关联商铺"
            style="width: 250px"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属区域：" prop="provinceCode">
          <RegionSelect v-model="region" size="medium" @change="regionChange" />
        </el-form-item>
        <el-form-item label="详细地址：" prop="contactAddress">
          <el-input
            v-model="formData.contactAddress"
            placeholder="详细地址"
            style="width: 250px"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系人：" prop="contactName">
          <el-input
            v-model="formData.contactName"
            placeholder="联系人"
            style="width: 250px"
          ></el-input>
        </el-form-item>

        <el-form-item label="联系方式：" prop="contactMobile">
          <el-input
            v-model="formData.contactMobile"
            placeholder="联系方式"
            style="width: 250px"
          ></el-input>
        </el-form-item>

        <el-form-item label="备注：">
          <el-input
            v-model="formData.remarks"
            type="textarea"
            :rows="3"
            style="width: 300px"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- <GoodsChooseShop
      v-if="show_shop"
      :is-check="false"
      :dialog-visible="show_shop"
      @close="show_shop=false"
      @confirm="selShop"
    ></GoodsChooseShop>-->
  </ContainerTit>
</template>

<script>
  import RegionSelect from "@/component/common/RegionSelectJSON";
  // import GoodsChooseShop from '@/component/goods/GoodsChooseShop.vue'
  import { updateWarehouse, addWarehouse, getWarehouseInfo } from "@/api/Stock";
  export default {
    name: "NewWarehouse",
    components: {
      RegionSelect,
      // GoodsChooseShop
    },
    data() {
      return {
        region: [],
        submitLoading: false,
        show_shop: false,
        formData: {
          shopName: "",
          warehouseCode: "",
          warehouseName: "",
          contactName: "",
          contactMobile: "",
          provinceCode: "",
          cityCode: "",
          districtCode: "",
          contactAddress: "",
          deleteStatus: 5,
          enableStatus: 5,
          remarks: "",
        },
        stock_id: "",
        map: {}, // 地图对象
        placeSearch: null, // 地图搜索对象
        address: "",
        cityData: [],
        selectRegion: [], // 选中地区
        cityProps: {
          value: "code",
          label: "name",
        },
        rules: {
          warehouseName: [
            { required: true, message: "请输入仓库名称", trigger: "blur" },
          ],
          shopId: [
            { required: true, message: "请选择关联商铺", trigger: "change" },
          ],
          provinceCode: [
            { required: true, message: "请选择所属区域", trigger: "blur" },
          ],
          contactAddress: [
            { required: true, message: "请输入详细地址", trigger: "blur" },
          ],
          contactName: [
            { required: true, message: "请输入联系人", trigger: "blur" },
          ],
          contactMobile: [
            { required: true, message: "请输入联系方式", trigger: "blur" },
          ],
        },
      };
    },
    created() {
      if (this.$route.params.id) {
        this.stock_id = this.$route.params.id;
        this.stock_detail();
      }
    },
    methods: {
      selShop(row) {
        this.formData.shopName = row[0].name;
        this.formData.shopId = row[0].id;
      },
      // 选择所属区域
      regionChange(val) {
        this.formData.provinceCode = val[0];
        this.formData.cityCode = val[1];
        this.formData.districtCode = val[2];
      },
      // 保存提交
      onSubmit(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            this.submitLoading = true;
            let formData = this.formData;
            let target = {};
            if (this.stock_id) {
              target = await updateWarehouse(this.stock_id, formData);
            } else {
              target = await addWarehouse(formData);
            }
            const data = target;
            this.submitLoading = false;

            this.$message({
              message: "提交成功",
              type: "success",
            });
            this.$closeCurrentGoEdit("/stock/WarehouseManagement/Management");
          }
        });
      },
      /** 获取仓库详情 */
      async stock_detail() {
        const { data } = await getWarehouseInfo(this.stock_id);
        this.region = [data.provinceCode, data.cityCode, data.districtCode];
        this.formData = { ...data };
      },
    },
  };
</script>

<style scoped>
  .module-box {
    padding: 15px;
    background-color: #ffffff;
    position: relative;
  }
  /*底部确认出库按钮*/
  .confirm-outgoing {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: #f9faff;
    position: absolute;
    bottom: -70px;
    left: 0;
  }
  /*地图api*/
  .map-box {
    width: 600px;
    height: 350px;
    background-color: #00ffff;
    position: relative;
  }
  .map-box #panel {
    position: absolute;
    background-color: white;
    height: 350px;
    overflow-y: auto;
    top: 0px;
    right: -286px;
    width: 280px;
  }
</style>
<style>
  /*
        隐藏地图内的 查看详情，电话， 图片
    */
  #panel .poi-more,
  #panel .poi-tel,
  #panel .poi-img {
    display: none !important;
  }
  .map-box #container .poi-more {
    display: none !important;
  }
</style>
