<template>
  <div>
    <!--网格-->
    <div class="attr-select" v-if="type==='网格'">
      <section class="grid">
        <a-checkbox @change="onChange">
          网格
        </a-checkbox>
        <div class="grid-content">网格精度
          <a-select default-value="10" style="width: 60%" @change="handleChange" :disabled="precision">
            <a-select-option v-for="item in precisionList" :value="item.value" :key="item.value">
              {{item.value}}
            </a-select-option>
          </a-select>
        </div>
      </section>
    </div>
    <!--文字内容-->
    <div class="attr-select" v-if="type==='文字内容'">
      <section class="grid">文字内容
        <div class="grid-content">
          <a-textarea placeholder="textarea with clear icon" allow-clear @change="changeTextArea" :rows="4"/>
        </div>
      </section>
    </div>
    <!--图片-->
    <div class="attr-select" v-if="type==='图片'">
      <section class="grid">图片
        <div class="grid-content">
          <a-upload-dragger
              name="file"
              :multiple="true"
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
              @change="changeImage"
          >
            <p class="icon-image">
              <a-icon type="cloud-upload"/>
            </p>
            <p class="ant-upload-text">将图片拖动到这里替换 </p>
            <p class="ant-upload-hint">本地上传</p>
          </a-upload-dragger>
        </div>
      </section>
    </div>
    <!--外观-->
    <div class="attr-select" v-if="type==='外观'">
      <section class="grid">外观
        <div class="grid-content">线宽
          <a-input-number v-model="numberValue" :min="1" @change="changeNumber" style="width: 168px"/>
        </div>
      </section>
    </div>
    <!--针对“设备/位置/管线/分区”属性示例-->
    <div class="attr-select">
      <section class="grid">
        <span>名称显示</span>
        <!--        v-if -> 编辑设备/区域/管道    -->
        <a-button type="link" class="edit-option-btn">{{`编辑设备`}}</a-button>
        <div class="grid-content">
          <a-input/>
        </div>
        <div class="grid-content">字号
          <a-input-number v-model="numberValue" :min="1" @change="changeNumber" style="width: 168px"/>
        </div>
        <div class="grid-content" v-if="type ==='设备'">数量
          <a-input-number v-model="numberValue" :min="1" @change="changeNumber" style="width: 218px"/>
        </div>
        <div class="grid-content" v-if="type ==='管线'">线宽
          <a-input-number v-model="numberValue" :min="1" @change="changeNumber" style="width: 218px"/>
        </div>
      </section>
    </div>
    <!--设备/工程信息化ID/工程信息化中的位置类型-->
    <div class="attr-select">
      <section class="grid">
        <!--        v-if -> 设备/工程信息化ID/工程信息化中的位置类型    -->
        <span>{{`设备`}}</span>
        <a-button type="link" class="edit-option-btn">选择编辑</a-button>
        <div class="grid-content">
          <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD4</a-card>
          <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD</a-card>
        </div>
      </section>
    </div>
    <!--    快捷操作提示-->
    <div style="position: fixed;bottom: 0;width: 280px;">
      <a-collapse :bordered="false" expand-icon-position="right">
        <template #expandIcon="props">
          <a-icon type="caret-up" :rotate="props.isActive ? 180 : 0"/>
        </template>
        <a-collapse-panel key="1" header="键盘操作提示" :style="customStyle">
          <p v-for="item in keyboardOperation">{{item.value}}</p>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </div>
</template>

<script>
    export default {
        name: "attr_select",
        props: ['type'],
        data() {
            return {
                precisionList: [
                    {value: 10}, {value: 20}, {value: 30},
                ],
                precision: true,
                numberValue: 4,
                customStyle: 'background: #fff;overflow: hidden;  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);border:0',
                keyboardOperation: [
                    {value: '拖动画布：'}, {value: '加选对象：'}, {value: '确认操作：'}, {value: '取消对象：'},
                ],


            }
        },
        methods: {
            onChange(e) {
                this.precision = e.target.checked === true ? false : true
            },
            handleChange(value) {
                console.log(`selected ${value}`);
            },
            changeNumber(value) {
                console.log(value)
            },
            changeTextArea(value) {
                console.log(value)

            },
            changeImage(info) {
                const status = info.file.status;
                if (status !== 'uploading') {
                    console.log(info.file, info.fileList);
                }
                if (status === 'done') {
                    this.$message.success(`${info.file.name} file uploaded successfully.`);
                } else if (status === 'error') {
                    this.$message.error(`${info.file.name} file upload failed.`);
                }
            }
        }
    }
</script>

<style scoped lang="less">

  .attr-select {
    border-top: 1px solid #c3c7cb;
    margin-top: 30px;

    .grid {

      margin: 10px 15px;
    }

    .grid-content {
      margin-top: 10px;
    }

    .icon-image {
      font-size: 25px;
    }

    .edit-option-btn {
      float: right;
      margin-top: -5px;
    }

    .attr-card {
      width: 250px;
      margin-bottom: 10px;
      white-space: normal;
      box-shadow: 0px 2px 6px 0px rgba(31, 36, 41, 0.05);
      border-radius: 4px;
    }

    .ant-upload.ant-upload-drag p.ant-upload-text {
      font-size: 14px;
      color: #C3C7CB;
    }

    .ant-upload.ant-upload-drag p.ant-upload-hint {
      color: #0091FF;
    }

  }
</style>