<template>
  <div class="mod-hotSearch-add-or-update">
    <el-dialog
      :title="!dataForm.transportId ? '新增' : '修改'"
      :close-on-click-modal="false"
      :visible.sync="visible"
    >
      <el-form
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        @keyup.enter.native="dataFormSubmit()"
        label-width="80px"
      >
        <el-form-item label="参考半径" prop="distance">
          以门店为中心 <el-input style="width:200px;" type="number" v-model.number="dataForm.distance" controls-position="right" :min="0" label="标题"></el-input> 公里
        </el-form-item>
        <el-form-item label="起送价" prop="amount">
          <el-input style="width:200px;" type="number" v-model.number="dataForm.amount" controls-position="right" :min="0" label="标题"></el-input> 元
          <div class="notice">用户在您的店铺下单时，实付金额需满足您设置的起送价金额，才能下单。</div>
        </el-form-item>
        <el-form-item label="配送费" prop="piece">
          <el-input style="width:200px;" type="number" v-model.number="dataForm.piece" controls-position="right" :min="0" label="标题"></el-input> 元
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" :loading="loading" @click="dataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loading:false,
      hasFreeCondition: 0,
      visible: false,
      addOrUpdateVisible: false,
      dataForm: {
          "transName": "",
          "distance": "",
          "amount":"",
          "piece":""
      },
      areaList: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      editVisible: false,
      dataRule: {
        distance: [
          { required: true, message: '不能为空', trigger: 'blur' },
          {type: 'number',min:0, message: '必须大于0'}
        ],
        amount: [
          { required: true, message: '不能为空', trigger: 'blur' },
          {type: 'number',min:0, message: '必须大于0'}

        ],
        piece: [
          { required: true, message: '不能为空', trigger: 'blur' },
          {type: 'number',min:0, message: '必须大于0'}

        ],
      }
    }
  },
  components: {
  },
  watch: {
    // 如果当前对话框不可见，则关闭选择城市的对话框
    visible: function (val) {
      if (!val) {
        this.addOrUpdateVisible = false
      }
    }
  },
  methods: {
    init (data) {
      this.visible = true
      if (data) {
        this.dataForm = Object.assign({}, data)
      } else {
          this.$nextTick(() => {
            this.dataForm = {
              "transName": "",
              "distance": "",
              "amount":"",
              "piece":""
            }
            this.dataForm.transportId = data.transportId || 0
            this.$refs.dataForm.resetFields()
          })
      }
      

    },

    // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          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)
                this.$nextTick(() => {
                  this.loading = false
                })
              }
            })
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .notice{
    font-size: 14px;
    color: #ccc;
  }
</style>