<template>
  <div class="app-container">
    <div style="background-color: #fff;padding: 20px;border-radius: 10px;">
      <p style="margin: 0; font-weight: 800;font-size: 16px;color: #343434;display: flex;align-items: center;margin-bottom: 20px;">
        <img src="../../../assets/images/icon_htgl_btzs.png" alt="" style="width: 16px;height: 20px;">
       <span style="margin-left: 10px;">社区资产</span>
      </p>
      <div style="background: #F3F3F3;padding: 20px 15px; padding-bottom: 0;margin-bottom: 20px;">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px">
      <el-row>

        <el-col :span="24">
          <el-col :span="8">
            <el-form-item label="资产名称" prop="equipmentName">
              <el-input
                v-model="queryParams.equipmentName"
                placeholder="请输入资产名称"
                clearable
                @keyup.enter.native="handleQuery"
                style="width: 210px;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="资产编号" prop="orderNum">
              <el-input
                v-model="queryParams.orderNum"
                placeholder="请输入资产编号"
                clearable
                @keyup.enter.native="handleQuery"
                style="width: 210px;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="资产类型" prop="assetId">
             <treeselect style="width: 210px;"  v-model="queryParams.assetId" :options="deptOptions" :normalizer="normalizer" placeholder="选择资产类型" />
            </el-form-item>
          </el-col>
        </el-col>
      </el-row>
      <el-form-item class="butt">
        <el-button size="mini" type="primary"   @click="handleQuery">搜索</el-button>
        <el-button  size="mini"  @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    </div>

     <div class="casr">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          size="mini"
          @click="handleAdd"
          v-hasPermi="['wuYe:assets:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['wuYe:assets:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['wuYe:assets:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          size="mini"
          @click="handleExport"
          v-hasPermi="['wuYe:assets:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table  :max-height="tableMaxHeight" v-loading="loading" @cell-click="erwe" :data="assetsList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <!-- <el-table-column label="资产类型，如设备、车辆等" align="center" prop="ssetType" /> -->
          <el-table-column label="资产名称" align="center" prop="equipmentName" />
          <el-table-column label="资产类型" align="center" prop="assetName" />
          <!-- <el-table-column label="设备封面" align="center" prop="equipmentCoverPhoto" /> -->
          <el-table-column label="资产编号" align="center" prop="equipmentNumber" width="100" />
          <el-table-column label="资产照片" align="center" prop="equipmentPhotos" width="100" >
          <template slot-scope="scope">
                <image-preview :src="scope.row.equipmentPhotos" :width="50" :height="50"/>
            </template>
          </el-table-column>
          <el-table-column label="资产二维码" align="center" prop="equipmentQrCode" width="180" >
            <template slot-scope="scope">
                <vue-qr  style="cursor: pointer;"  :text="scope.row.imageUrl" :size="50" :margin="5" ></vue-qr>
                <!-- @click="erwe(scope.row)" -->
                <!-- <image-preview :src="scope.row.equipmentQrCode" :width="50" :height="50"/> -->
            </template>
          </el-table-column>
          <el-table-column label="设备状态" align="center" prop="equipmentStatus">
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.shebei_status" :value="scope.row.equipmentStatus"/>
                  </template>
                </el-table-column>
          <el-table-column label="资产型号" align="center" prop="equipmentModel" />
          <el-table-column label="资产购买时间" align="center" prop="purchaseDate" width="120">
            <template slot-scope="scope">
              <span>{{scope.row.purchaseDate}}</span>
            </template>
          </el-table-column>
         <el-table-column label="用途描述" align="center" prop="equipmentPurpose" width="120" show-overflow-tooltip/>
          <el-table-column label="资产位置" align="center" prop="equipmentLocation"  width="120" show-overflow-tooltip/>
          <!-- <el-table-column label="购买价格" align="center" prop="equipmentPrice" /> -->
          <!-- <el-table-column label="设备入库时间" align="center" prop="storageTime" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.storageTime  }}</span>
            </template>
          </el-table-column>
          <el-table-column label="入库操作人" align="center" prop="storagePerson" width="100" />
          <el-table-column label="设备出库时间" align="center" prop="outboundTime" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.outboundTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="出库操作人" align="center" prop="outboundPerson" width="100" /> -->
          <!-- <el-table-column label="车牌号" align="center" prop="plateNumber" /> -->

          <!-- <el-table-column label="最近维护日期" align="center" prop="maintenanceDate" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.maintenanceDate }}</span>
            </template>
          </el-table-column> -->
          <!-- <el-table-column label="维护操作人" align="center" prop="maintenancePerson"width="100" /> -->
         <!-- <el-table-column label="保修期" align="center" prop="warrantyPeriod" />
          <el-table-column label="折旧率" align="center" prop="depreciationRate" /> -->
          <!-- <el-table-column label="备注" align="center" prop="remark" /> -->


          <el-table-column width="120" label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                style="color: #28C529;"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['wuYe:assets:edit']"
              >修改</el-button>
              <el-button
                size="mini"
                type="text"
                style="color: red;"
                @click="handleDelete(scope.row)"
                v-hasPermi="['wuYe:assets:remove']"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
    </div>

    <!-- <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    /> -->
    </div>

    <!-- 添加或修改资产类型对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="资产类型" prop="assetId">
             <treeselect v-model="form.assetId" @select="nhsf" :options="deptOptions" :normalizer="normalizer" placeholder="选择资产类型" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="资产名称" prop="equipmentName">
              <el-input v-model="form.equipmentName" placeholder="请输入设备名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="资产编号" prop="equipmentNumber">
              <el-input v-model="form.equipmentNumber"  placeholder="请输入设备编号" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-col :span="8">
              <el-form-item label="资产型号" prop="equipmentModel">
                <el-input v-model="form.equipmentModel"  placeholder="请输入设备编号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="资产位置" prop="equipmentLocation">
                <el-input v-model="form.equipmentLocation"  placeholder="请输入设备存放位置或使用位置" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="购买价格" prop="equipmentPrice">
                <el-input v-model="form.equipmentPrice" placeholder="请输入设备购买价格" />
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="8">
            <el-form-item label="购买时间" prop="purchaseDate">
              <el-date-picker clearable
              style="width: 100%;"
                          v-model="form.purchaseDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择设备购买时间">
                        </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="资产状态" prop="storageTime">
              <el-select style="width: 100%;" v-model="form.equipmentStatus" placeholder="请选择设备状态，如正常、维修中、报废等">
                          <el-option
                            v-for="dict in dict.type.shebei_status"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                          ></el-option>
                        </el-select>

            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="出库时间" prop="outboundTime">
              <el-date-picker clearable
              style="width: 100%;"
                          v-model="form.outboundTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择设备出库时间">
                        </el-date-picker>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="8">
            <el-form-item label="最近维护日期" prop="maintenanceDate">
              <el-date-picker clearable
              style="width: 100%;"
                          v-model="form.maintenanceDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择最近维护日期">
                        </el-date-picker>
            </el-form-item>
          </el-col> -->


         <!-- <el-col :span="8">
            <el-form-item label="入库操作人" prop="storagePerson">
              <el-input v-model="form.storagePerson" placeholder="请输入入库操作人" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="维护操作人" prop="maintenancePerson">
              <el-input v-model="form.maintenancePerson" placeholder="请输入维护操作人" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出库操作人" prop="outboundPerson">
              <el-input v-model="form.outboundPerson" placeholder="请输入出库操作人" />
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="车牌号" prop="plateNumber">
              <el-input v-model="form.plateNumber" placeholder="请输入车牌号" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="保修期" prop="warrantyPeriod">
              <el-input v-model="form.warrantyPeriod" placeholder="请输入保修期" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="折旧率" prop="depreciationRate">
              <el-input v-model="form.depreciationRate" placeholder="请输入折旧率" />
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="用途描述" prop="equipmentPurpose">
             <el-input v-model="form.equipmentPurpose" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注" prop="remark">
                      <el-input v-model="form.remark" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
          <el-col :span="24" class="imagwew">
            <el-form-item label="设备封面" prop="equipmentCoverPhoto">
              <image-upload v-model="form.equipmentCoverPhoto"/>
           </el-form-item>
          </el-col>
          <el-col :span="24" class="imagwew">
            <el-form-item label="设备照片" prop="equipmentPhotos">
              <image-upload v-model="form.equipmentPhotos"/>
            </el-form-item>
          </el-col>
        </el-row>



        <!-- <el-form-item label="删除标志" prop="delFlag">
          <el-input v-model="form.delFlag" placeholder="请输入删除标志" />
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="查看二维码" :visible.sync="opene" width="440px" append-to-body>
       <vue-qr :logoSrc="imageUrl"  :text="erwxi" :size="400" :margin="5" ></vue-qr>
    </el-dialog>
  </div>
</template>

<script>
import { listAssets, getAssets, delAssets, addAssets, updateAssets } from "@/api/wuguan/assets";
import { listAssetType } from "@/api/wuguan/assetType";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import vueQr from 'vue-qr'
export default {
  name: "Assets",
  dicts: ['sys_normal_disable','shebei_status'],
  components: { Treeselect ,vueQr},
  data() {
    return {
 // 遮罩层
       loading: true,
       // 选中数组
       ids: [],
       // 非单个禁用
       single: true,
       // 非多个禁用
       multiple: true,
       // 显示搜索条件
       showSearch: true,
       // 总条数
       total: 0,
       // 社区资产表格数据
       assetsList: [],
       // 弹出层标题
       title: "",
       // 是否显示弹出层
       open: false,
       opene:false,
       // 部门树选项
       deptOptions: [],
       // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
         ssetType: null,
         equipmentName: null,
         equipmentCoverPhoto: null,
         equipmentNumber: null,
         equipmentQrCode: null,
         equipmentStatus: null,
         equipmentModel: null,
         purchaseDate: null,
         equipmentPurpose: null,
         equipmentLocation: null,
         equipmentPrice: null,
         storageTime: null,
         storagePerson: null,
         outboundTime: null,
         outboundPerson: null,
         plateNumber: null,
         equipmentPhotos: null,
         maintenanceDate: null,
         maintenancePerson: null,
         warrantyPeriod: null,
         depreciationRate: null,
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
         ssetType: [
           { required: true, message: "资产类型，如设备、车辆等不能为空", trigger: "change" }
         ],
         equipmentName: [
           { required: true, message: "设备名称不能为空", trigger: "blur" }
         ],
         equipmentStatus: [
           { required: true, message: "设备状态，如正常、维修中、报废等不能为空", trigger: "change" }
         ],
       },
       tableMaxHeight:'200',
       boarbuyOptions:[],
       imageUrl: require('../../../assets/images/logon.png'),//icon路径
       isshoue:false,
       erwxi:''
    };
  },
  created() {
    this.getList();
    this.getListtype()
  window.onresize = () => {
  	      this.changeTableMaxHeight()
  	    }
  	    this.changeTableMaxHeight()
  this.getDicts("erw_url").then(response => {
            this.boarbuyOptions = response.data;

      });
  },
  mounted() {
  	window.onresize = () => {
  	          this.changeTableMaxHeight()
  	        }
  	        this.changeTableMaxHeight()
  },
  methods: {
    /** 查询社区资产列表 */
        getList() {
          this.loading = true;
          this.isshoue = false
          listAssets(this.queryParams).then(response => {
            this.assetsList = response.rows;
            this.assetsList.filter(rou=>{
              rou.imageUrl ='http://192.168.101.233'  + '?id=' + rou.communityAssetId
              // this.boarbuyOptions[0].dictValue
              console.log(rou.imageUrl)
            })
            this.total = response.total;
            this.loading = false;
             this.isshoue = true
          });
        },
        getListtype() {
          this.loading = true;
          let snge={'pageNum':1,'pageSize':6000}
          listAssetType(snge).then(response => {
             this.deptOptions = this.handleTree(response.data, "assetId");
            // this.total = response.total;
            this.loading = false;
          });
        },
        erwe(row){
          console.log(3)
          this.erwxi = row.imageUrl
         this.opene = true

        },
        // 取消按钮
        cancel() {
          this.open = false;
          this.reset();
        },
        // 表单重置
        reset() {
          this.form = {
            assetId: null,
            ssetType: null,
            equipmentName: null,
            equipmentCoverPhoto: null,
            equipmentNumber: null,
            equipmentQrCode: null,
            equipmentStatus: null,
            equipmentModel: null,
            purchaseDate: null,
            equipmentPurpose: null,
            equipmentLocation: null,
            equipmentPrice: null,
            storageTime: null,
            storagePerson: null,
            outboundTime: null,
            outboundPerson: null,
            plateNumber: null,
            equipmentPhotos: null,
            maintenanceDate: null,
            maintenancePerson: null,
            warrantyPeriod: null,
            depreciationRate: null,
            createBy: null,
            createTime: null,
            updateBy: null,
            updateTime: null,
            remark: null
          };
          this.resetForm("form");
        },
   /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.assetId,
        label: node.assetName,
        children: node.children
      };
    },
    // 用户状态修改
    handleStatusChange(row) {
      let text = row.status === "0" ? "启用" : "停用";
      this.$modal.confirm('确认要"' + text + '""' + row.userName + '"').then(function() {
        return changeUserStatus(row.userId, row.status);
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(function() {
        row.status = row.status === "0" ? "1" : "0";
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.communityAssetId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    // 多选框选中数据
       handleSelectionChange(selection) {
         this.ids = selection.map(item => item.communityAssetId)
         this.single = selection.length!==1
         this.multiple = !selection.length
       },
       /** 新增按钮操作 */
       handleAdd() {
         this.reset();
         this.open = true;
         this.title = "添加社区资产";
       },
       /** 修改按钮操作 */
       handleUpdate(row) {
         this.reset();
         const assetId = row.communityAssetId || this.ids
         getAssets(assetId).then(response => {
           this.form = response.data;
           this.open = true;
           this.title = "修改社区资产";
         });
       },
       /** 提交按钮 */
       submitForm() {
         this.$refs["form"].validate(valid => {
           if (valid) {
             if (this.form.communityAssetId != null) {
               updateAssets(this.form).then(response => {
                 this.$modal.msgSuccess("修改成功");
                 this.open = false;
                 this.getList();
               });
             } else {
               addAssets(this.form).then(response => {
                 this.$modal.msgSuccess("新增成功");
                 this.open = false;
                 this.getList();
               });
             }
           }
         });
       },
       /** 删除按钮操作 */
       handleDelete(row) {
         const assetIds = row.communityAssetId || this.ids;
         this.$modal.confirm('是否确认删除社区资产编号为"' + assetIds + '"的数据项？').then(function() {
           return delAssets(assetIds);
         }).then(() => {
           this.getList();
           this.$modal.msgSuccess("删除成功");
         }).catch(() => {});
       },
     /** 导出按钮操作 */
        handleExport() {
          this.download('wuYe/assets/export', {
            ...this.queryParams
          }, `assets_${new Date().getTime()}.xlsx`)
        },
        nhsf(val){
        console.log(123,val)
        this.form.assetName = val.assetName
        this.form.assetId = val.assetId
        },
    // 获取屏幕高度
    showFilterForm () {
          this.filterActive = !this.filterActive
          this.changeTableMaxHeight()
        },

        changeTableMaxHeight () {
          let height = document.body.offsetHeight // 网页可视区域高度
          // if (this.filterActive) {
          //   this.tableMaxHeight = height - 320
          // } else {
            this.tableMaxHeight = height - 150
          // }
          console.log(height)
        }
  }
};
</script>
<style  lang="scss">
  .imagwew{
    .el-upload--picture-card{
      width: 80px;
      height: 80px;
      line-height: 80px;
    }
    .el-upload-list--picture-card .el-upload-list__item{
      width: 80px;
      height: 80px;
    }
  }
  .butt{
    .el-button--small{
      padding: 9px 23px !important;
      font-size: 14px;
    }
  }
  .casr{
    .el-tabs__item.is-active{
      color: #196CFF;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__item{
      padding: 0  30px !important;
    }
  }
  .el-table .el-table__header-wrapper th{
    background-color:#F5F6F8;
    color:#343434;
  }
  .el-table{
    color:#343434;
  }
</style>
<style scoped lang="scss">
  .goe{
    p{
      margin: 0;
      font-weight: 800;
      font-size: 16px;
      color: #161616;
      margin-top: 10px;
      margin-bottom: 3px;
      padding: 0 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      display:-webkit-box; //作为弹性伸缩盒子模型显示。
      -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
      -webkit-line-clamp:1; //显示的行
    }
    p:nth-child(2){
      // margin-bottom: 10px;
      margin-top: 0;
     font-weight: 400;
     font-size: 14px;
     color: #AAAAAA;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-bottom: 10px;
     span:nth-child(2){
       padding: 3px 5px;
       background: #EDEDED;
       border-radius: 10px;
     }
    }
  }
  .ingwe{
    border: 2px solid #196CFF;
  }
  </style>
