export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default() {
        return null;
      }
    },
    isUpdate: {
      type: Boolean,
      default() {
        return false;
      }
    },
    provinces: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      my_show: false,
      loading: false,
      dataProvince: [],
      edits: [],
      columns: [
        {
          title: '省份',
          key: 'province',
          minWidth: 180
        },
        {
          title: '占比',
          minWidth: 120,
          render: (h, context) => {
            return h('InputNumber', {
              props: {
                max: 100,
                min: 0,
                value: context.row.percentages,
                disabled: !this.isUpdate
              },
              on: {
                input: (val) => {
                  this.edits = JSON.parse(JSON.stringify(this.dataProvince));
                  this.edits[context.index]['percentages'] = val;
                }
              }
            });
          }
        }
      ]
    };
  },
  watch: {
    show(bool) {
      this.my_show = bool;
      if (bool) {
        if (this.data) {
          this.dataProvince = this.provinces.map(el => {
            let percentages = (this.data.province && this.data.province[el]) ? Number(this.data.province[el]) : 0;
            return { province: el, percentages };
          });
        }
      }
    }
  },
  methods: {
    ok() {
      let total = this.edits.reduce((acc, cur) => {
        return acc + cur.percentages;
      }, 0);

      if (total !== 100) {
        return this.$Message.error('占比总和必须为100');
      }

      let province = {};

      for (const key in this.edits) {
        const element = this.edits[key];
        province[element.province] = element.percentages;
      }

      let data = JSON.parse(JSON.stringify(this.data));
      data.province = province;
      this.$emit('province-success', data);
      this.clear();
    },
    visibleChange(bool) {
      if (!bool) {
        this.$emit('update:show', false);
      }
    },
    clear() {
      this.dataProvince = [];
      this.my_show = false;
    }
  }
};