/*
 *@description:
 *@author: hudw
 *@date: 2022-03-31 17:14:12
*/
<template>
  <p-card class="full-card-panel" v-show="st > 0" :bordered="false">
    <a-space slot="extra" v-if="st !== 1">
      <p-button type="primary" :icon="confirmLoading ? 'loading' : ''" @click="save">保存</p-button>
      <p-button @click="back">取消</p-button>
    </a-space>
    <a-space slot="title">
      <a-icon type="arrow-left" @click="back(record && record.id)" :style="{ color: '#08c' }" />
      {{ title }}
    </a-space>
    <a-row :gutter="20">
      <a-col :span="16">
        <p-grid-form ref="grid" :items="formItems" :span="12" :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }">

          <template :slot="st !== 1 && 'color'">
            <div class="ant-input color-unit">
              <colorPicker v-model="color" defaultColor="rgba(0, 0, 0, 0.65)" />
            </div>
          </template>
          <template :slot="st !== 1 && 'background'">
            <div class="ant-input color-unit">
              <colorPicker v-model="background" defaultColor="transparent" />
            </div>
          </template>
        </p-grid-form>
      </a-col>
      <a-col :span="8">
        <p-card title="预览">
          <div class="content-view">
            <div class="content-view-bj" :style="{ color, background }">正文内容预览</div>
          </div>
        </p-card>
      </a-col>
    </a-row>

  </p-card>
</template>
<script>
const titleArr = ['', '查看', '新建', '修改']

import { setFormItems, baseColor } from './config.js';

import { mainSaveData } from '../../api';

const pageName = {
  main: '供应商',
  children: '发货商'
}
export default {
  props: {
    options: {//字典
      type: Object
    },
    record: {
      //当前行数据
      type: Object,
    },
    mainId: {
      //主表ID
      type: null,
    },
    formName: { //主表：main，表细表：children
      type: 'main',
    },
    st: {
      type: Number,
      default: 0/**0=不显示,1=查看,2=新建,3=修改,4=复制 */
    }
  },
  data() {
    return {
      color: baseColor.color,
      background: baseColor.background,
      vm: this,
      confirmLoading: false,
      list: [],
      formItems: []
    };
  },
  watch: {
    color(color) {
      let form = this.form()
      form.setFieldsValue({ color })
    },
    background(background) {
      let form = this.form()
      form.setFieldsValue({ background })
    },
    record(data) {
      if (data && data.color && data.background) {
        let { color, background } = data
        this.color = color
        this.background = background
      } else {
        this.color = baseColor.color
        this.background = baseColor.color
      }

    },
    st(value) {

      let form = this.form()
      form.resetFields();
      if (value === 1) {
        //查看

      }
      if (value === 2) {
        //新建
        this.color = baseColor.color;
        this.background = baseColor.background;

      }
      if (this.record) {
        if (value === 3) {
          //修改
        }
        form.setFieldsValue(this.record)
      }
    }
  },
  computed: {
    formList() {
      return this[this.formName + 'GetFormList']
    },
    title() {
      return titleArr[this.st] + this.$route.meta.title
    }
  },
  mounted() {
    this.formItems = setFormItems(this)
  },
  methods: {
    getFieldsValue() {
      return this.form().getFieldsValue()
    },
    form() {
      return this.$refs.grid.form
    },
    save() {
      let form = this.form()
      form.validateFields((error, value) => {
        if (error) return
        return mainSaveData(this, value, this.st).then((res) => {
          if (res.success) {
            setTimeout(() => {
              this.back(res.data || value.id, true)
            }, 1000)
          }

        })
      })
    },
    back(id, isReload = false) {
      this.$emit('back', id, isReload)
    },
  },
};
</script>

<style lang="less" >
.color-unit {
  padding: 4px;
  display: block;
  background: #f8f8f8;

  background-image:
    linear-gradient(45deg, #dbdbdb 25%, transparent 0, transparent 75%, #dbdbdb 0),
    linear-gradient(45deg, #dbdbdb 25%, transparent 0, transparent 75%, #dbdbdb 0);
  background-position: 0 0, 15px 15px;
  background-size: 10px 10px;

  .colorView {
    position: relative;

    &::before {
      content: "";
      z-index: -1;
      position: absolute;
      width: 100%;
      height: 100%;
      background: #f8f8f8;
      background-image:
        linear-gradient(45deg, #dbdbdb 25%, transparent 0, transparent 75%, #dbdbdb 0),
        linear-gradient(45deg, #dbdbdb 25%, transparent 0, transparent 75%, #dbdbdb 0);
      background-position: 0 0, 15px 15px;
      background-size: 10px 10px;
    }

  }

  .m-colorPicker {
    border: 1px solid rgba(0, 0, 0, 0.2); //display: none;
  }

  .m-colorPicker .colorBtn {
    width: 16px;
    height: 16px;

  }
}

.content-view {
  padding: 15px;
  font-size: 24px;
  font-weight: bold;
  background-color: transparent;
  background: #f8f8f8;
  //text-shadow:1px 1px 2px #888;

  background-image:
    linear-gradient(45deg, #dbdbdb 25%, transparent 0, transparent 75%, #dbdbdb 0),
    linear-gradient(45deg, #dbdbdb 25%, transparent 0, transparent 75%, #dbdbdb 0);
  background-position: 0 0, 15px 15px;
  background-size: 30px 30px;
  // color: #fff;

  .content-view-bj {
    background: transparent;
    padding: 20px;
  }
}
</style>