<style>
@import "../../assets/css/cssReset.css";
.clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
}
.line_MusicBox .addCompany {
  width: 200px;
}
.line_MusicBox .musicList {
  width: 216px;
  height: 158px;
  border-radius: 6px;
  float: left;
  font-size: 12px;
  background-color: #fff;
  margin: 20px 25px 25px 0;
}
.line_MusicBox .musictopInfo {
  width: 100%;
  height: 68px;
  background-color: #9cf;
  position: relative;
}
.line_MusicBox .musicName {
  margin: 16px 20px 14px;
  color: #333333;
  height: 30px;
}
.line_MusicBox .leftList {
  margin-left: 20px;
}
.line_MusicBox .rightList {
  margin-right: 20px;
  float: right;
}
.line_MusicBox .topList {
  margin-top: 20px;
  float: left;
  width: 100%;
  color: #fff;
}
.line_MusicBox .Time {
  color: #999999;
}
.line_MusicBox .mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  top: 0;
  left: 0;
  color: #fff;
}
.line_MusicBox .musicList:hover .mask {
  background: rgba(0, 0, 0, 0);
}
.line_MusicBox .mask div {
  margin-top: 20px;
}
.line_MusicBox .delIcon {
  font-size: 18px;
  cursor: pointer;
  position: relative;
  bottom: 3px;
  color: #dddddd;
}
.line_MusicBox .musicList .delIcon:hover {
  color: #e95252;
}
</style>
<template>
  <div class="flexOne">
    <div class="query-box">
      <ul>
        <li>
          <span>
            <em>{{$t('system.table_ssLine')}}</em>
            <el-select filterable v-model='msg.lineID' :placeholder="$t('system.ph_buxian')">
              <el-option :label="$t('system.ph_buxian')" value='0'></el-option>
              <el-option v-for='item in lineList' :label='item.LineName' :value='item.LineID' :key='item.LineID'>
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" @click="resetPageIndex(),initTableInfo()" :value="$t('pub.searchBtn')" />
          <input type="button" class="normalBtn" @click="clearInfo(),outerVisible=true,dialogTitle='新增背景音乐'" :value="$t('pub.addBtn')"/>
        </li>
      </ul>
    </div>
    <div class="line_MusicBox clearfix" v-loading="loading">
      <div class="musicList" v-for="item in tableInfo" :key="item.subCode">
        <div class="musictopInfo">
          <div class="mask">
            <div>
              <span class="leftList">{{item.LineName}}</span>
              <span class="rightList">{{item.playCount}}</span>
            </div>
          </div>
        </div>
        <div>
          <div class="musicName">
            {{item.fileName}}
          </div>
          <div>
            <span class="leftList Time">{{item.UpdateDateStr}}</span>
            <span class="rightList delIcon"><i class="el-icon-delete" @click="isdelete(item.musicID)"></i></span>
          </div>
        </div>
      </div>
    </div>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="total,prev, pager, next, jumper"
      :page-size=msg.pageSize :total=total>
    </el-pagination>
    <el-dialog center custom-class='insideDialog' width="100" :title="$t('pub.hintMsg')" :visible.sync="innerVisible" append-to-body>
      {{this.insideDialogTxt}}
      <div slot="footer" class="dialog-footer">
        <button class="hollowFixedBtn" type="primary" @click="innerVisible=false">{{$t('pub.cancelBtn')}}</button>
        <button class="normalBtn" @click="delInfo()">{{$t('pub.sureBtn')}}</button>
      </div>
    </el-dialog>
    <el-dialog custom-class='w500' :title="dialogTitle" :visible.sync="outerVisible" center>
      <el-form :model="addMsg" ref="addMsg" label-width="120px">
        <el-form-item :label="$t('advmanager.v_line')">
          <el-select filterable clearable v-model='addMsg.lineID' :placeholder="$t('pub.unlimitedSel')">
            <el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
            <el-option v-for='item in lineList' :label='item.LineName' :value='item.LineID' :key='item.LineID'>
            </el-option>
          </el-select>
          <div class="re-upload">
            <el-upload class="upload-demo" :action="AllUrl" :show-file-list="false" name="importfile" :onError="uploadError"
              :onSuccess="uploadSuccess" :beforeUpload="beforeAvatarUpload" multiple>
              <el-button size="small" type="primary">{{$t('tips.dianjishanhcuan')}}</el-button>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button> &nbsp;
        <button class="hollowFixedBtn" @click="outerVisible = false">{{$t('pub.cancelBtn')}}</button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: {
        pageIndex: 1,
        pageSize: 10,
        lineID: "0"
      },
      addMsg: {
        ID: "0",
        lineID: "0"
      },
      total: 0,
      currentPage: 1,
      loading: true,
      lineList: "",
      tableInfo: "",
      outerVisible: false,
      innerVisible: false,
      dialogTitle: "",
      insideDialogTxt: "",
      deleteID: "",
      importFileUrl:
        "api/File/post?cmd=User_post_FileUpload&fileType=1&fileLimit=10",
      AllUrl: ""
    };
  },
  methods: {
    initTableInfo() {
      this.loading = true;
      this.apipost(
        "linemusic_get_GetPageList",
        this.msg,
        res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.tableInfo = res.data.data.pageData;
            this.total = res.data.data.count;
          } else {
            this.innerVisible = true;
            this.insideDialogTxt = res.data.message;
          }
        },
        err => {}
      );
    },
    getlineList() {
      //获取线路下拉列表
      let msg = {};
      this.apipost(
        "line_post_GetAllList",
        msg,
        res => {
          if (res.data.resultCode == 1) {
            this.lineList = res.data.data;
          } else {
            this.innerVisible = true;
            this.insideDialogTxt = res.data.message;
          }
        },
        err => {}
      );
    },
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.initTableInfo();
    },
    resetPageIndex() {
      this.msg.pageIndex = 1;
      this.currentPage = 1;
    },
    resetCosts() {
      //新增背景音乐
      this.apipost(
        "linemusic_post_Set",
        this.addMsg,
        res => {
          if (res.data.resultCode == 1) {
            this.innerVisible = true;
            this.outerVisible = false;
            this.insideDialogTxt = res.data.message;
            this.initTableInfo();
          } else {
            this.innerVisible = true;
            this.insideDialogTxt = res.data.message;
          }
        },
        err => {}
      );
    },
    updateInfo(ID) {
      //修改模板信息
      let msg = {
        ID: ID
      };
      this.apipost(
        "linemusic_get_Get",
        msg,
        res => {
          if (res.data.resultCode == 1) {
            this.addMsg = res.data.data;
          } else {
            this.innerVisible = true;
            this.insideDialogTxt = res.data.message;
          }
        },
        err => {}
      );
    },
    clearInfo() {
      this.addMsg = {
        ID: "0",
        lineID: "0"
      };
    },
    isdelete(id) {
      this.insideDialogTxt = "是否删除？";
      this.innerVisible = true;
      this.deleteID = id;
    },
    delInfo() {
      let msg = {
        ID: this.deleteID
      };
      this.apipost(
        "linemusic_post_Remove",
        msg,
        res => {
          if (res.data.resultCode == 1) {
            this.innerVisible = false;
            this.Success("删除成功!");
            this.initTableInfo();
          } else {
            this.Error(res.data.message);
          }
        },
        err => {}
      );
    },
    submitForm(addMsg) {
      //提交创建、修改表单
      let that = this;
      that.$refs[addMsg].validate(valid => {
        if (valid) {
          that.resetCosts();
        } else {
          return false;
        }
      });
    },
    // 上传成功后的回调
    uploadSuccess(res, file, fileList) {},
    // 上传错误
    uploadError(response, file, fileList) {},
    // 上传前对文件的大小的判断
    beforeAvatarUpload(file) {
      const extension = file.name.split(".")[1] === "mp3";
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!extension) {
        this.Error("上传模板只能是 mp3!");
      }
      if (!isLt2M) {
        this.Error("上传模板大小不能超过 10MB!");
      }
      return extension && isLt2M;
    }
  },

  mounted() {
    this.getlineList();
    this.initTableInfo();
    let _url = this.domainManager().DomainUrl;
    this.AllUrl = _url + this.importFileUrl;
  }
};
</script>