<template>
  <div class="detail_main">
    <div class="wrapper">
      <div class="wrapper_view" v-if="isView">
        <div class="view_item">
          <div class="view_item_left">备注</div>
          <div class="view_item_right">{{ baseform.newLabel }}</div>
        </div>
      </div>
      <div class="wrapper_edit" v-if="!isView">
        <van-form ref="form">
          <van-field v-model="baseform.newLabel" label="备注" name="newLabel" placeholder="请输入备注"></van-field>
        </van-form>
      </div>
    </div>
    <div class="footer_view" v-if="isView">
      <van-button type="primary" @click="handleEdit">编辑</van-button>
    </div>
    <div class="footer_edit" v-if="!isView">
      <van-button plain color="#2372eb" @click="handleCancle" class="qx">取消</van-button>
      <van-button type="primary" @click="handleSave">保存</van-button>
    </div>
  </div>
</template>
<script>
import { systemRecordEditLable } from "@/service/api/custome";
import {
  Button,
  Form,
  Field,
  RadioGroup,
  Radio,
  Popup,
  DatetimePicker,
  Picker,
  TreeSelect
} from "vant";
export default {
  props: {
    speciallabel: {
      type: String,
      default: ""
    },
    custType: {
      type: String,
      default: ""
    },
    custId: {
      type: String,
      default: ""
    },
  },
  data() {
    return {
      isView: true,
      baseform: {
        newLabel: "",
        oldLabel: ""
      }
    };
  },
  components: {
    VanButton: Button,
    VanForm: Form,
    VanField: Field,
    VanRadioGroup: RadioGroup,
    VanRadio: Radio,
    VanPopup: Popup,
    VanDatetimePicker: DatetimePicker,
    VanPicker: Picker,
    VanTreeSelect: TreeSelect
  },
  created() {
    this.baseform.newLabel = this.speciallabel;
  },
  methods: {
    handleEdit() {
      this.baseform.oldLabel = this.baseform.newLabel;
      this.isView = !this.isView;
    },
    handleCancle() {
      this.baseform.newLabel = this.baseform.oldLabel;
      this.isView = !this.isView;
    },
    handleSave() {
      let p = {
        custId: this.custId,
        custType: this.custType,
        lable: this.baseform.newLabel
      };
      systemRecordEditLable(p).then(res => {
        if (res.code === 200) {
          this.isView = !this.isView;
          this.$emit("callFn")
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.wrapper {
  // padding-top: 46px;
  font-size: 16px;
  background-color: #fff;
}

.view_item {
  display: flex;
  justify-content: space-between;
  line-height: 40px;
  font-size: 14px;
  border-bottom: 1px solid rgba(245, 245, 245, 1);
  padding: 0 20px;
}

.view_item_left {
  width: 40%;
  color: rgb(22, 13, 13);
}

.view_item_right {
  width: 60%;
  color: rgb(22, 13, 13);
}

.footer_view {
  /deep/ .van-button {
    width: 100%;
  }
}

.footer_edit {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;

  /deep/ .van-button {
    width: 48%;
  }
}

.label_color {
  /deep/ .van-field__label {
    color: #646566;
  }
}
/deep/ .van-field__label {
    color: rgb(22, 13, 13);
  }
</style>
