<template>
  <div class="dashboard-container">
    <div class="search-content">
      <el-input clearable style="width: 220px;" placeholder="请输入菜单名称" v-model="searchData.menuName"></el-input>
      <el-select style="width: 220px;" clearable placeholder="请选择状态" v-model="searchData.status">
        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <div class="search-btn">
        <div class="search" @click="handleQuery">查询</div>
        <div class="reset" @click="resetSearchData()">重置</div>
      </div>
    </div>
    <div class="table-content">
      <div class="btn" @click="handleAdd()">
        <span class="icon font_family">&#xe604;</span>
        新增
      </div>
      <div class="btn" @click="exportExcel">
        <span class="icon font_family">&#xe605;</span>
        <a>导出</a>
      </div>
      <el-table :indent="50" v-loading="loading" :data="menuList" stripe ref="tableRef" row-key="menuId"
        :default-expand-all="false" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        highlight-current-row style="width: 100%;">
        <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="300"></el-table-column>
        <el-table-column prop="icon" label="图标" align="center" width="100">
          <template slot-scope="scope">
            <svg-icon style="color: #1096DB;" :icon-class="scope.row.icon" />
          </template>
        </el-table-column>
        <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
        <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="status" label="状态" width="80">
          <!-- <template #default="scope">
            <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
          </template> -->
          <template slot-scope="scope">
            <div class="startUsing" v-if="scope.row.status == '1'">启用</div>
            <div class="Deactivate" v-else>停用</div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" width="170">
          <template #default="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button type="text" style="color: #2866DD;" @click="handleUpdate(scope.row)"
              v-hasPermi="['system:menu:edit']">修改</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" style="color: #2866DD;" @click="handleAdd(scope.row)">新增</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" style="color: #2866DD;" @click="delMenu(scope.row)"
              v-hasPermi="['system:menu:remove']">删除</el-button>
          </template>
        </el-table-column>
        <template v-slot:empty>
          <svg-icon icon-class="search-none" style="font-size: 64px;" />
          <p>暂无数据</p>
        </template>
      </el-table>
      <!-- 修改菜单对话框 -->
      <el-dialog center @close="cancel" :title="title" v-if='this.open' :visible.sync="open" width="636px"
        :before-close="handleClose" append-to-body>
        <div class="dialog_box" style="height: 502px;overflow: auto;">
          <el-form label-width="100px" ref="editMenuRef" :model="form" :rules="rules" label-position="right">
            <el-form-item v-if="form.parentId !== 0" label="上级菜单" prop="parentName" key="parentName">
              <el-select style="width: 340px;" clearable v-model="form.parentName" placeholder="选择上级菜单">
                <el-option :key="form.parentId" :value="menuOptions.id" :label="menuOptions.label" hidden />
                <el-tree :data="menuOptions" :props="defaultProps" :node-key="menuOptions.id" accordion highlight-current
                  @node-click="handleNodeClick" /></el-select>
            </el-form-item>
            <el-form-item label="菜单类型" prop="menuType" key="menuType">
              <el-radio-group v-model="form.menuType">
                <el-radio label="M">目录</el-radio>
                <el-radio label="C">菜单</el-radio>
                <el-radio label="F">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.menuType != 'F'" label="菜单图标" prop="icon">
              <el-popover width="290" trigger="click">
                <div class="svgList">
                  <el-tabs v-model="activeName" type="card">
                    <el-tab-pane v-for="item in titleData" :label="item.title" :name="item.index">
                      <svg-icon style="display: inline-block;margin-right: 5px;" @click="editSvg(items)"
                        v-for="items in svgData[item.index - 1]" :icon-class="items" />
                    </el-tab-pane>
                  </el-tabs>
                </div>
                <el-input style="width: 340px;" slot="reference" placeholder="请选择菜单图标" v-model="form.icon">
                  <template #prefix>
                    <svg-icon v-if="form.icon" :icon-class="form.icon" class="el-input__icon"
                      style="height: 32px;width: 16px;position: relative;top: 5px;left: 5px;" />
                    <el-icon v-else style="height: 32px;width: 16px;position: relative;top: 5px;left: 5px;">
                      <search />
                    </el-icon>
                  </template></el-input>
              </el-popover>
            </el-form-item>
            <el-form-item label="菜单名称" prop="menuName" key="menuName">
              <el-input style="width: 340px;" v-model="form.menuName" placeholder="请输入菜单名称" />
            </el-form-item>
            <el-form-item label="显示排序" prop="orderNum" key="orderNum">
              <el-input-number placeholder="请输入显示排序" v-model="form.orderNum" controls-position="right" :step="1" style="width: 340px;"
                :min="1" />
            </el-form-item>
            <el-form-item label="是否外链" v-if="form.menuType != 'F'" key="isFrame">
              <el-radio-group v-model="form.isFrame">
                <el-radio label="1">是</el-radio>
                <el-radio label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="路由地址" prop="path" key="path">
              <el-input style="width: 340px;" v-model="form.path" placeholder="请输入路由地址" />
            </el-form-item>
            <el-form-item label="组件路径" v-if="form.menuType == 'C'" prop="component" key="component">
              <el-input style="width: 340px;" v-model="form.component" placeholder="请输入组件路径" />
            </el-form-item>
            <el-form-item label="权限字符" v-if="form.menuType != 'M'" prop="perms" key="perms">
              <el-input style="width: 340px;" v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
            </el-form-item>
            <el-form-item label="路由参数" v-if="form.menuType == 'C'" key="query">
              <el-input style="width: 340px;" v-model="form.query" placeholder="请输入路由参数" maxlength="255" />
            </el-form-item>
            <el-form-item label="是否缓存" v-if="form.menuType == 'C'" key="isCache">
              <el-radio-group v-model="form.isCache">
                <el-radio-button label="1">缓存</el-radio-button>
                <el-radio-button label="2">不缓存</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="显示状态" v-if="form.menuType != 'F'" key="visible">
              <el-radio-group v-model="form.visible">
                <el-radio-button label="1">显示</el-radio-button>
                <el-radio-button label="2">隐藏</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="菜单状态" v-if="form.menuType != 'F'" key="status">
              <el-radio-group v-model="form.status">
                <el-radio-button label="1">启用</el-radio-button>
                <el-radio-button label="2">停用</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <div class="search" @click="editMenu">保 存</div>
            <div class="reset" @click="cancel()">取 消</div>
          </div>
        </template>
      </el-dialog>
      <!-- 添加菜单对话框 -->
      <el-dialog center :title="addMenuTitle" v-if='this.addMenuOpen' :visible.sync="addMenuOpen" width="636px"
        :before-close="handleClose" append-to-body>
        <div class="dialog_box" style="height: 502px;overflow: auto;">
          <el-form label-width="100px" ref="addMenuRef" :model="addMenuForm" :rules="addRules" label-position="right">
            <el-form-item v-if="isShoeParentName" label="上级菜单" prop="parentName" key="parentName">
              <el-select style="width: 340px;" :disabled="true" clearable v-model="addMenuForm.parentName"
                placeholder="选择上级菜单">
                <el-option :key="addMenuForm.parentId" :value="menuOptions.id" :label="menuOptions.label" hidden />
                <el-tree :data="menuOptions" :props="defaultProps" :node-key="menuOptions.id" accordion highlight-current
                  @node-click="handleNodeClick" /></el-select>
            </el-form-item>
            <el-form-item label="菜单类型" prop="menuType" key="menuType">
              <el-radio-group v-model="addMenuForm.menuType">
                <el-radio label="M">目录</el-radio>
                <el-radio label="C">菜单</el-radio>
                <el-radio label="F">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="addMenuForm.menuType != 'F'" label="菜单图标" prop="icon">
              <el-popover width="290" trigger="click">
                <div class="svgList">
                  <el-tabs v-model="activeName" type="card">
                    <el-tab-pane v-for="item in titleData" :label="item.title" :name="item.index">
                      <svg-icon style="display: inline-block;margin-right: 5px;" @click="addSvg(items)"
                        v-for="items in svgData[item.index - 1]" :icon-class="items" />
                    </el-tab-pane>
                  </el-tabs>
                </div>
                <el-input class="iconInput" style="width: 340px;" slot="reference" v-model="addMenuForm.icon" placeholder="请选择菜单图标">
                  <template #prefix>
                    <svg-icon v-if="addMenuForm.icon" :icon-class="addMenuForm.icon" class="el-input__icon"
                      style="height: 32px;width: 16px;position: relative;top: 5px;left: 5px;" />
                    <el-icon v-else style="height: 32px;width: 16px;position: relative;top: 5px;left: 5px;">
                      <search />
                    </el-icon>
                  </template></el-input>
              </el-popover>
            </el-form-item>
            <el-form-item label="菜单名称" prop="menuName" key="menuName">
              <el-input style="width: 340px;" v-model="addMenuForm.menuName" placeholder="请输入菜单名称" />
            </el-form-item>
            <el-form-item label="显示排序" prop="orderNum" key="orderNum">
              <el-input-number placeholder="请输入显示排序" v-model="addMenuForm.orderNum" controls-position="right" :step="1" style="width: 340px;"
                :min="1" />
            </el-form-item>
            <el-form-item v-if="addMenuForm.menuType != 'F'" key="isFrame">
              <template #label>
                <span>
                  是否外链
                  <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
                    <el-icon><question-filled /></el-icon>
                  </el-tooltip>
                </span>
              </template>
              <el-radio-group v-model="addMenuForm.isFrame">
                <el-radio label="1">是</el-radio>
                <el-radio label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="路由地址" prop="path" key="path">
              <el-input style="width: 340px;" v-model="addMenuForm.path" placeholder="请输入路由地址" />
            </el-form-item>
            <el-form-item label="组件路径" prop="component" v-if="addMenuForm.menuType == 'C'" key="component">
              <el-input style="width: 340px;" v-model="addMenuForm.component" placeholder="请输入组件路径" />
            </el-form-item>            
            <el-form-item label="路由参数" v-if="addMenuForm.menuType !== 'F'" key="query">
              <el-input style="width: 340px;" v-model="addMenuForm.query" placeholder="请输入路由参数" maxlength="255" />
            </el-form-item>
            <el-form-item label="权限字符" v-if="addMenuForm.menuType !== 'M'" prop="perms"  key="perms">
              <el-input style="width: 340px;" v-model="addMenuForm.perms" placeholder="请输入权限字符" maxlength="100" />
            </el-form-item>            
            <el-form-item label="是否缓存" v-if="addMenuForm.menuType == 'C'" key="isCache">
              <el-radio-group v-model="addMenuForm.isCache">
                <el-radio-button label="1">缓存</el-radio-button>
                <el-radio-button label="2">不缓存</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="显示状态" v-if="addMenuForm.menuType != 'F'" key="visible">
              <el-radio-group v-model="addMenuForm.visible">
                <el-radio-button label="1">显示</el-radio-button>
                <el-radio-button label="2">隐藏</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="菜单状态" v-if="addMenuForm.menuType != 'F'" key="status">
              <el-radio-group v-model="addMenuForm.status">
                <el-radio-button label="1">启用</el-radio-button>
                <el-radio-button label="2">停用</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <div class="c">
            <div class="search" @click="submitForm">保 存</div>
            <div class="reset" @click="editCancel()">取 消</div>
          </div>
        </template>
      </el-dialog>
    </div>

  </div>
</template>

<script>
const Buildings = require.context('@/icons/Buildings', false, /\.svg$/)
const Business = require.context('@/icons/Business', false, /\.svg$/)
const Device = require.context('@/icons/Device', false, /\.svg$/)
const Document = require.context('@/icons/Document', false, /\.svg$/)
const Others = require.context('@/icons/Others', false, /\.svg$/)
const svg = require.context('@/icons/svg', false, /\.svg$/)
const System = require.context('@/icons/System', false, /\.svg$/)
const User = require.context('@/icons/User', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)

const UserData = requireAll(User)//用户
const BuildingsData = requireAll(Buildings)//建筑
const BusinessData = requireAll(Business)//办公
const DeviceData = requireAll(Device)//设备
const DocumentData = requireAll(Document)//文档
const SystemData = requireAll(System)//系统
const OthersData = requireAll(Others)//其他
const svgData = requireAll(svg)//默认
import { mapGetters } from 'vuex'
import { getMenuTree, delMenu, getMenuList, addMenu, editMenu, exportMenuExcel } from '@/api/sysManage'
export default {
  name: 'home',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  components: {
  },
  data() {
    return {
      activeName: '1',
      titleData: [
        {
          index: '1',
          title: '用户'
        },
        {
          index: '2',
          title: '建筑'
        },
        {
          index: '3',
          title: '办公'
        },
        {
          index: '4',
          title: '设备'
        },
        {
          index: '5',
          title: '文档'
        },
        {
          index: '6',
          title: '系统'
        },
        {
          index: '7',
          title: '其他'
        },
        {
          index: '8',
          title: '默认'
        },
      ],
      svgData: [],
      searchData: {
        menuName: '',
        status: ''
      },
      showChooseIcon: false,
      form: {
        menuId: undefined,
        parentId: 0,
        parentName: "",
        menuName: undefined,
        icon: undefined,
        menuType: "M",
        orderNum: undefined,
        isFrame: "1",
        isCache: "1",
        visible: "1",
        status: "1"
      },
      addMenuForm: {
        menuId: undefined,
        parentId: 0,
        parentName: "",
        menuName: undefined,
        icon: undefined,
        menuType: "M",
        orderNum: undefined,
        isFrame: "1",
        isCache: "1",
        visible: "1",
        status: "1"
      },
      isShoeParentName: false,
      parentName: '',
      open: false,
      addMenuOpen: false,
      menuList: [],
      title: '',
      addMenuTitle: '',
      loading: true,
      menuOptions: [],
      statusOptions: [
        {
          label: '启用',
          value: '1'
        },
        {
          label: '停用',
          value: '2'
        }
      ],
      rules: {
        parentName: [{ required: true, message: "请选择父级菜单", trigger: "blur" }],
        parentId: [{ required: true, message: "请选择父级菜单", trigger: "blur" }],
        menuName: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
        orderNum: [{ required: true, message: "菜单顺序不能为空", trigger: "blur" }],
        path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }],
        perms: [{ required: true, message: "权限字符不能为空", trigger: "blur" }]
      },
      addRules: {
        parentName: [{ required: true, message: "请选择父级菜单", trigger: "blur" }],
        parentId: [{ required: true, message: "请选择父级菜单", trigger: "blur" }],
        menuName: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
        orderNum: [{ required: true, message: "菜单顺序不能为空", trigger: "blur" }],
        path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }],
        perms: [{ required: true, message: "权限字符不能为空", trigger: "blur" }],        
      },
      iconSelectRef: null,
    }
  },
  created() {
    this.svgData = [this.handleArr(UserData), this.handleArr(BuildingsData), this.handleArr(BusinessData), this.handleArr(DeviceData), this.handleArr(DocumentData), this.handleArr(SystemData), this.handleArr(OthersData), this.handleArr(svgData)]
    this.getMenuList(this.searchData)
  },
  methods: {
    editSvg(items) {
      this.form.icon = items
    },
    addSvg(items) {
      this.addMenuForm.icon = items
    },
    handleArr(arr) {
      let tempArr = []
      arr.forEach(item => {
        let str = item.default.id.slice(5)
        tempArr.push(str)
      })
      return tempArr
    },
    cancel() {
      this.getMenuList(this.searchData)
      this.open = false
    },
    editCancel() {
      this.getMenuList(this.searchData)
      this.addMenuOpen = false
    },
    exportExcel() {
      exportMenuExcel('/system/menu/export').then(res => {
        // const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });
        // const url = window.URL.createObjectURL(blob);
        // const a = document.createElement('a');
        // a.href = url;
        // a.download = '菜单列表.xlsx';
        // a.click();
        // window.URL.revokeObjectURL(url);


        if (res.type == "application/json") {
          const reader = new FileReader(); 
          reader.readAsText(res, 'utf-8'); 
          reader.onload = function () {
            const msg = JSON.parse(reader.result);
            if(msg.code == 200){
              const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });
              const url = window.URL.createObjectURL(blob);
              const a = document.createElement('a');
              a.href = url;
              a.download = '菜单列表.xlsx';
              a.click();
              window.URL.revokeObjectURL(url);
            } else{
              Message({
                type: 'error',
                message: msg.msg
              });
            }      
          }
        }else{
          const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = '菜单列表.xlsx';
          a.click();
          window.URL.revokeObjectURL(url);
        }



      })
    },
    submitForm() {
      this.$refs.addMenuRef.validate(valid => {
        if (valid) {
          addMenu(this.addMenuForm).then(res => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '添加成功！'
              });
              this.getMenuList(this.searchData)
              this.addMenuOpen = false
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              });
            }
          })
        }
      })
    },
    editMenu() {
      this.$refs.editMenuRef.validate(valid => {
        if (valid) {
          let params = this.form
          editMenu(params).then(res => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '修改成功！'
              });
              this.getMenuList(this.searchData)
              this.open = false
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              });
            }
          })
        }
      })
    },
    handleUpdate(row) {
      this.form.menuId = row.menuId
      this.title = "修改菜单"
      this.getTreeselect();
      this.form = row
      this.open = true
    },
    getMenuList(params) {
      this.loading = true
      getMenuList(params).then(res => {
        if (res.code == 200) {
          this.menuList = this.handleTree(res.data, "menuId")
          this.loading = false
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }

      })
    },
    resetSearchData() {
      this.searchData = {
        menuName: '',
        status: ''
      }
      this.getMenuList(this.searchData)
    },
    showSelectIcon() {
      this.iconSelectRef.reset();
      this.showChooseIcon = true;
    },
    selected(name) {
      this.form.icon = name;
      this.showChooseIcon = false;
    },
    handleNodeClick(v) {
      this.form.parentId = v.id
      this.form.parentName = v.label
    },
    handleAdd(row) {
      this.addMenuForm = {
        menuId: undefined,
        parentId: 0,
        parentName: "",
        menuName: undefined,
        icon: undefined,
        menuType: "M",
        orderNum: undefined,
        isFrame: "1",
        isCache: "1",
        visible: "1",
        status: "1"
      }
      if (row) {
        this.isShoeParentName = true
        this.addMenuForm.parentName = row.menuName
        this.addMenuForm.parentId = row.menuId
      } else {
        this.isShoeParentName = false
      }

      this.getTreeselect();
      this.addMenuOpen = true;
      this.addMenuTitle = "新增菜单";
    },
    reset() {
      this.form = {
        menuId: undefined,
        parentId: 0,
        menuName: undefined,
        icon: undefined,
        menuType: "M",
        orderNum: undefined,
        isFrame: "1",
        isCache: "1",
        visible: "1",
        status: "1"
      }
    },
    getTreeselect() {
      this.menuOptions = [];
      getMenuTree().then(response => {
        this.menuOptions = response.data
      })
    },
    handleQuery() {
      this.getMenuList(this.searchData)
    },
    delMenu(scope) {
      this.$confirm('确定要删除吗?', '信息提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delMenu(scope.menuId).then(res => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getMenuList(this.searchData)
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })

    },
    handleTree(data, id, parentId, children) {
      let config = {
        id: id || 'id',
        parentId: parentId || 'parentId',
        childrenList: children || 'children'
      };

      var childrenListMap = {};
      var nodeIds = {};
      var tree = [];

      for (let d of data) {
        let parentId = d[config.parentId];
        if (childrenListMap[parentId] == null) {
          childrenListMap[parentId] = [];
        }
        nodeIds[d[config.id]] = d;
        childrenListMap[parentId].push(d);
      }

      for (let d of data) {
        let parentId = d[config.parentId];
        if (nodeIds[parentId] == null) {
          tree.push(d);
        }
      }

      for (let t of tree) {
        adaptToChildrenList(t);
      }

      function adaptToChildrenList(o) {
        if (childrenListMap[o[config.id]] !== null) {
          o[config.childrenList] = childrenListMap[o[config.id]];
        }
        if (o[config.childrenList]) {
          for (let c of o[config.childrenList]) {
            adaptToChildrenList(c);
          }
        }
      }
      return tree;
    },
    parseTime(time, pattern) {
      if (arguments.length === 0 || !time) {
        return null
      }
      const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
      let date
      if (typeof time === 'object') {
        date = time
      } else {
        if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
          time = parseInt(time)
        } else if (typeof time === 'string') {
          time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
        }
        if ((typeof time === 'number') && (time.toString().length === 10)) {
          time = time * 1000
        }
        date = new Date(time)
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
      }
      const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key]
        // Note: getDay() returns 0 on Sunday
        if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
        if (result.length > 0 && value < 10) {
          value = '0' + value
        }
        return value || 0
      })
      return time_str
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.dashboard-container {
  .search-content {
    width: 100%;
    height: 74px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding-left: 10px;

    .el-input {
      margin: 0 10px;
    }

    .el-select {
      margin: 0 10px;
    }

    .search-btn {
      display: flex;
      align-items: center;
      height: 100%;
      margin-left: 10px;

      div {
        // margin: 0 6px;
        display: inline-block;
        width: 80px;
        height: 40px;
        border-radius: 2px;
        font-size: 14px;
        line-height: 40px;
        text-align: center;
      }

      div:hover {
        cursor: pointer;
      }

      .search {
        margin-right: 10px;
        background-color: #2766DD;
        color: #F7F8FB;
      }

      .search:hover {
        background-color: #4D85F4;
      }

      .reset {
        color: #333334;
        border: 1px solid #D7D7D7;
      }

      .reset:hover {
        color: #1F9FFF;
        border: 1px solid #1F9FFF;
      }
    }
  }

  .table-content {
    margin-top: 15px;
    width: 100%;
    background-color: #fff;
    padding: 0 20px;

    .btn {
      margin: 15px 20px 15px 0;
      cursor: pointer;
      float: left;
      text-align: center;
      width: 98px;
      height: 34px;
      border-radius: 2px;
      border: 1px solid #ABC7FD;
      line-height: 34px;
      font-weight: 400;
      font-size: 14px;
      color: #2250C8;
      background-color: #E7EEFF;
    }

    .btn:hover {
      color: #FFFFFF;
      background-color: #2250C8;
      border: 1px solid #2250C8;
    }

    .btn:active {
      color: #FFFFFF;
      background-color: #194DA4;
      border: 1px solid #194DA4;
    }

    .startUsing {
        width: 54px;
        height: 24px;
        margin: 14.5px auto 0;
        line-height: 24px;
        text-align: center;
        font-size: 12px;
        color: #00974D;
        border-radius: 4px;
        background-color: #E7FAF0;
        border: 1px solid #BEFDDD;
      }

      .Deactivate {
        width: 54px;
        height: 24px;
        margin: 14.5px auto 0;
        line-height: 24px;
        text-align: center;
        font-size: 12px;
        color: #FF9933;
        border-radius: 4px;
        background-color: #FFF3E8;
        border: 1px solid #FDE6CF;
      }

    .operateBtn {
      display: flex;
      justify-content: center;
      color: #1E9FFF;

      div {
        margin: 0 5px;
        cursor: pointer;
      }
    }

    .pagination {
      margin: 10px 0;
      width: 100%;
      height: 20px;

      .el-pagination {
        float: right;
      }
    }    
  }

}

::v-deep .el-dialog__body {
  padding: 20px 95px !important;
}

// 选中后radio文本的颜色
::v-deep .el-radio__input.is-checked+.el-radio__label {
  color: #2766DD
}

/* radio选中后小圆点的颜色 */
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #2766DD !important;
  border-color: #2766DD !important;
}

::v-deep.el-radio-button {
  // margin-right: 15px;
  border-radius: 4px;

  .el-radio-button__inner {
    //修改按钮样式
    width: 120px;
    height: 42px;
    background: #F7F8FA;
    color: #333;
    border: 0 !important;
  }

  .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    // 修改按钮激活样式
    color: #fff;
    background-color: #2766DD;
    border-color: #2766DD;
    box-shadow: -1px 0 0 0 #2766DD;
  }
}
::v-deep .el-input-number .el-input__inner{
  text-align: left !important;
}
</style>
