<template>
  <div class="mod-hotSearch-add-or-update">
    <el-dialog
      :title="!dataForm.shopId ? '新增' : '修改'"
      :close-on-click-modal="false"
      :visible.sync="visible"
    >
      <div class="item">
        <div class="label">门店编码</div>
        <div class="value">{{dataForm.shopId}}</div>
      </div>
       <div class="item">
        <div class="label">门店名称</div>
        <div class="value">{{dataForm.shopName}}</div>
      </div>
       <div class="item">
        <div class="label">所在城市</div>
        <div class="value">{{ dataForm.city}}</div>
      </div>
       <div class="item">
        <div class="label">门店地址</div>
        <div class="value">{{dataForm.province + dataForm.city + dataForm.area + dataForm.shopAddress}}</div>
      </div>
       <div class="item">
        <div class="label">门店经度</div>
        <div class="value">{{dataForm.shopLng}}</div>
      </div>
       <div class="item">
        <div class="label">门店维度</div>
        <div class="value">{{dataForm.shopLat}}</div>
      </div>
       <div class="item">
        <div class="label">坐标类型</div>
        <div class="value">{{dataForm.mapType == 1?'高德∣腾讯':'百度'}}</div>
      </div>
      <el-form
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        @keyup.enter.native="dataFormSubmit()"
        label-width="80px"
      >
        <el-form-item label="门店电话" prop="tel">
          <el-input style="width:200px;" v-model="dataForm.tel" controls-position="right" :min="0" label="标题"></el-input>
        </el-form-item>
        <el-form-item label="物品类别" prop="category">
          <el-checkbox-group 
            v-model="dataForm.category"
            >
            <el-checkbox v-for="item in typeOptions" :label="item.value" :key="item.label">{{item.label}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      typeOptions: [
        {
          value: 1,
          label: '食品'
        },
        {
          value: 2,
          label: '饮品'
        },
        {
          value: 3,
          label: '鲜花'
        },
        {
          value: 4,
          label: '票务'
        },
        {
          value: 5,
          label: '超市'
        },
        {
          value: 6,
          label: '水果'
        },
        {
          value: 7,
          label: '医药'
        },
        {
          value: 8,
          label: '蛋糕'
        },
        {
          value: 9,
          label: '酒品'
        },
        {
          value: 10,
          label: '服装'
        },
        {
          value: 11,
          label: '汽配'
        },
        {
          value: 12,
          label: '数码'
        },
        {
          value: 13,
          label: '夜宵烧烤'
        },
        {
          value: 14,
          label: '水产'
        },
        {
          value: 15,
          label: '百货'
        },
        {
          value: 16,
          label: '成人'
        },
        {
          value: 17,
          label: '火锅'
        },
        {
          value: 99,
          label: '其他'
        }
      ],
      hasFreeCondition: 0,
      visible: false,
      addOrUpdateVisible: false,
      dataForm: {
          "shopId": "",
          "shopName": "",
          "intro": "",
          "tel": "",
          "shopAddress": "",
          "province": "",
          "provinceId": "",
          "city": "",
          "cityId": "",
          "area": "",
          "areaId": "",
          "shopLogo": "",
          "shopPhotos": "",
          "businessLicense": "",
          "identityCardFront": "",
          "identityCardLater": "",
          "shopLat": "",
          "shopLng": "",
          "cityCode": "",
          "districtCode": "",
          "mapType": "1",
          "category;":[],
      },
      areaList: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      editVisible: false,
      dataRule: {
        distance: [
          { required: true, message: '不能为空', trigger: 'blur' },
        ],
        amount: [
          { required: true, message: '不能为空', trigger: 'blur' },
        ],
        piece: [
          { required: true, message: '不能为空', trigger: 'blur' },
        ],
      }
    }
  },
  components: {
  },
  watch: {
    // 如果当前对话框不可见，则关闭选择城市的对话框
    visible: function (val) {
      if (!val) {
        this.addOrUpdateVisible = false
      }
    }
  },
  methods: {
    init (data) {
      this.visible = true
      if (data) {
        this.dataForm = {
          "shopId": data.shopId,
          "shopName": data.shopName,
          "intro": data.intro,
          "tel": data.tel,
          "shopAddress": data.shopAddress,
          "province": data.province,
          "provinceId": data.provinceId,
          "city": data.city,
          "cityId": data.cityId,
          "area": data.area,
          "areaId": data.areaId,
          "shopLogo": data.shopLogo,
          "shopPhotos": data.shopPhotos|| '',
          "businessLicense": data.businessLicense,
          "identityCardFront": data.identityCardFront,
          "identityCardLater": data.identityCardLater,
          "shopLat": data.shopLat,
          "shopLng": data.shopLng,
          "cityCode": data.cityCode,
          "districtCode": data.districtCode,
          "mapType": data.mapType,
          "category":data.category.split(',').map(Number) || [],
        }
      } else {
          this.$nextTick(() => {
            this.dataForm = {
              "shopId": "",
              "shopName": "",
              "intro": "",
              "tel": "",
              "shopAddress": "",
              "province": "",
              "provinceId": "",
              "city": "",
              "cityId": "",
              "area": "",
              "areaId": "",
              "shopLogo": "",
              "shopPhotos": "",
              "businessLicense": "",
              "identityCardFront": "",
              "identityCardLater": "",
              "shopLat": "",
              "shopLng": "",
              "cityCode": "",
              "districtCode": "",
              "mapType": "1",
              "category":[],
            }
            this.$refs.dataForm.resetFields()
          })
      }
      

    },

    // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/shop/transport2`),
            method: this.dataForm.transportId ? 'put' : 'post',
            data: this.$http.adornData({
              'transportId': this.dataForm.transportId || undefined,
              'transName': this.dataForm.transName,
              'distance': this.dataForm.distance,
              'amount': this.dataForm.amount,
              'piece': this.dataForm.piece,
            })
          }).then(({ data }) => {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList', this.page)
              }
            })
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .notice{
    font-size: 14px;
    color: #ccc;
  }
  .item{
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 40px;
    margin-bottom: 22px;
    .label{
      width: 80px;
      color: #666;
      text-align: center;
    }
    .value{
      color: #222;
      
    }
  }
</style>