<template>
  <div class="powerEquip">
    <div class="model">
      <div class="modelHeader" ref="modelHeader">
        <div class="headerTitle">
          <span class="span">模板编辑</span>
          <el-button class="goBack" @click="goBack">返回</el-button>
        </div>
        <div class="headerContent">
          <span style="margin-left: 10px">
            <span style="color: red">*</span>
            模板名称:
          </span>
          <el-input class="headerInput" v-model="modelName" placeholder="" />
          <span style="margin-right: 10px">报告生成日期 :</span>
          <el-radio v-model="headerRadio" label="1">
            同电费结算日
            <span>
              <el-tooltip
                class="item"
                effect="dark"
                content="电费结算日 : 未配置"
                placement="top"
              >
                <i class="el-icon-info"></i>
              </el-tooltip>
            </span>
          </el-radio>
          <el-radio v-model="headerRadio" label="2">自定义</el-radio>
          <div class="headerSelect" v-if="headerRadio == 2">
            <span>每月</span>
            <el-select
              v-model="headerValue"
              placeholder="Select"
              style="width: 70px"
            >
              <el-option
                v-for="item in headerOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div style="display: initial">
            <el-checkbox
              v-model="checked1"
              label="是否自动发送邮件"
            ></el-checkbox>
            <el-checkbox v-model="checked2" label="模板是否生效"></el-checkbox>
          </div>
          <div class="headerButton">
            <el-button type="success">预览</el-button>
            <el-button type="primary">保存</el-button>
          </div>
        </div>
      </div>

      <div class="modelContent">
        <div class="contentLeft">
          <div class="detail-top">报告内容</div>
          <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="[5]"
            :props="defaultProps"
          />
        </div>
        <div class="contentCenter"></div>
        <div class="contentRight">
          <div class="setting-header">安全用电</div>
          <div class="setting-borderError">
            <div class="setting-title">
              <svg-icon class="setting-icon" iconClass="transformer"></svg-icon>
              <span style="margin-left: 25px">变压器分析</span>
              <a class="setting-textBtn">
                添加 变压器设备（多选）
                <span class="setting-required">*</span>
              </a>
            </div>
            <div class="setting-error">请至少选择一个 变压器设备</div>
            <div class="setting-formItem" style="padding: 10px 0px 0px 22px">
              <span class="setting-title">功率因数：</span>
              <div class="ant-radio-group ant-radio-group-outline">
                <el-radio v-model="transformer" label="1">原始数据</el-radio>
                <el-radio v-model="transformer" label="2">
                  平均功率因数
                </el-radio>
              </div>
            </div>
          </div>
          <div class="setting-borderError">
            <div class="setting-title">
              <svg-icon class="setting-icon" iconClass="line"></svg-icon>
              <span style="margin-left: 25px">线路分析</span>
              <a class="setting-textBtn">
                添加 线路设备（多选）
                <span class="setting-required">*</span>
              </a>
            </div>
            <div class="setting-error">请至少选择一个 线路设备</div>
            <div class="setting-formItem" style="padding: 10px 0px 0px 22px">
              <span class="setting-title">功率因数：</span>
              <div class="ant-radio-group ant-radio-group-outline">
                <el-radio v-model="line" label="1">原始数据</el-radio>
                <el-radio v-model="line" label="2">平均功率因数</el-radio>
              </div>
            </div>
          </div>

          <div class="setting-header">经济用电</div>
          <div class="setting-card">
            <div class="setting-formItem">
              <span class="setting-title">优化建议：</span>
              <div class="ant-radio-group ant-radio-group-outline">
                <el-radio v-model="optimization" label="1">原始数据</el-radio>
                <el-radio v-model="optimization" label="2">
                  平均功率因数
                </el-radio>
              </div>
            </div>
          </div>

          <div class="setting-header">设备状态分析</div>
          <div class="setting-card">
            <div style="display: flex">
              <div style="line-height: 30px">重要缺陷设备列表：</div>
              <div class="ant-input-group-addon">最多显示</div>
              <el-input-number
                v-model="defects"
                :min="0"
                :max="10"
                controls-position="right"
                @change="handleChange"
              />
              <div class="ant-input-group-addon">个</div>
            </div>
          </div>

          <div class="setting-header">告警分析</div>
          <div class="setting-card">
            <div style="display: flex">
              <div style="line-height: 30px">重要告警列表：</div>
              <div class="ant-input-group-addon">最多显示</div>
              <el-input-number
                v-model="alarm"
                :min="0"
                :max="10"
                controls-position="right"
                @change="handleChange"
              />
              <div class="ant-input-group-addon">个</div>
            </div>
            <div style="display: flex; margin-top: 10px">
              <div style="line-height: 30px">告警最多的设备列表：</div>
              <div class="ant-input-group-addon">最多显示</div>
              <el-input-number
                v-model="most"
                :min="0"
                :max="10"
                controls-position="right"
                @change="handleChange"
              />
              <div class="ant-input-group-addon">个</div>
            </div>
          </div>

          <div class="setting-header">更多设置</div>
          <div class="setting-card">
            <div>
              <span>报告名称：</span>
              <el-select v-model="reportName" placeholder="" class="select">
                <el-option
                  v-for="item in reportOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'powerEquip',
  components: {},
  props: {},
  setup(props, { emit }) {
    props

    const goBack = () => {
      const params = {
        modleBool: true,
      }
      emit('modle', params)
    }

    return {
      goBack,
      headerRadio: ref('1'),
      modelName: ref(''),
      headerOptions: ref([
        {
          value: 1,
          label: '1日',
        },
        {
          value: 2,
          label: '2日',
        },
        {
          value: 3,
          label: '3日',
        },
        {
          value: 4,
          label: '4日',
        },
        {
          value: 5,
          label: '5日',
        },
      ]),
      headerValue: ref(1),
      checked1: ref(true),
      checked2: ref(true),
      data: ref([
        {
          id: 1,
          label: 'Level one 1',
          children: [
            {
              id: 4,
              label: 'Level two 1-1',
              children: [
                {
                  id: 9,
                  label: 'Level three 1-1-1',
                },
                {
                  id: 10,
                  label: 'Level three 1-1-2',
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: 'Level one 2',
          children: [
            {
              id: 5,
              label: 'Level two 2-1',
            },
            {
              id: 6,
              label: 'Level two 2-2',
            },
          ],
        },
        {
          id: 3,
          label: 'Level one 3',
          children: [
            {
              id: 7,
              label: 'Level two 3-1',
            },
            {
              id: 8,
              label: 'Level two 3-2',
            },
          ],
        },
      ]),
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      transformer: ref('1'),
      line: ref('1'),
      optimization: ref('1'),
      defects: ref(0),
      alarm: ref(0),
      most: ref(0),
      reportOption: [
        {
          value: 1,
          label: '站点名称+模拟名称',
        },
        {
          value: 2,
          label: '模板名称',
        },
        {
          value: 3,
          label: '自定义',
        },
      ],
      reportName: 1,
    }
  },
})
</script>

<style lang="scss" scoped>
.powerEquip {
  height: calc(100vh - 130px);
  min-width: 810px;
  .model {
    background-color: #fff;
    height: 100%;
    padding: 15px;
    .modelHeader {
      height: 140px;
      overflow-y: auto;
      border-bottom: 4px solid #e8e8e8;
      .headerTitle {
        .span {
          border-left: 3px red solid;
          padding-left: 5px;
          margin-right: 15px;
          font-size: 17px;
        }
        .goBack {
          min-height: 24px;
          padding: 0px 5px;
        }
      }

      .headerContent {
        padding: 8px 10px;
        margin-top: 10px;
        .headerInput {
          width: 220px;
          flex-wrap: nowrap;
          margin-right: 30px;
        }
        .headerSelect {
          display: initial;
          margin-right: 15px;
        }
        .headerButton {
          margin-top: 15px;
        }
      }
    }
    .modelHeader::-webkit-scrollbar {
      display: none;
    }

    .modelContent {
      height: calc(100vh - 285px);
      display: flex;
      .contentLeft {
        padding-top: 5px;
        width: 30%;
        .detail-top {
          text-align: center;
          color: #000;
          height: 44px;
          font-size: 16px;
          line-height: 44px;
          border-bottom: 1px solid #e8e8e8;
          position: relative;
        }
      }
      .contentCenter {
        width: 20px;
        background-color: #f0f2f5;
      }
      .contentRight {
        padding-left: 15px;
        padding-top: 5px;
        width: 70%;
        overflow-y: auto;
        .setting-header {
          height: 44px;
          line-height: 44px;
          color: #000;
          font-size: 16px;
          font-weight: 500;
          position: relative;
        }
        .setting-borderError {
          border: 1px solid #f5222d;
          margin-bottom: 8px;
          padding: 8px 12px;
          width: 100%;
          font-size: 14px;
          .setting-title {
            color: #000;
            position: relative;
            .setting-icon {
              font-size: 22px;
              color: #1890ff;
              position: absolute;
            }
            .setting-textBtn {
              color: #1890ff;
              margin-left: 12px;
              text-decoration: underline;
              .setting-required {
                color: #f5222d;
                margin-left: 2px;
              }
            }
          }
          .setting-error {
            color: #f5222d;
            margin: 10px 0 0 20px;
          }
          .setting-formItem {
            display: flex;
            .setting-title {
              height: 32px;
              line-height: 32px;
              display: block;
            }
          }
        }
        .setting-card {
          padding: 0px 12px;
          width: 100%;
          font-size: 14px;
          .ant-input-group-addon {
            line-height: 30px;
            padding: 0 11px;
            border: 1px solid #d9d9d9;
            background-color: #fafafa;
            text-align: center;
            display: inline-table;
          }
          .select {
            width: 260px;
          }
        }
      }

      .contentRight::-webkit-scrollbar {
        display: none;
      }
    }
  }
}
</style>