<style>
.CarrierList {
  border-bottom: 1px dashed #eee;
  padding-bottom: 5px;
  margin-bottom: 5px;
}

.CarrierList span {
  display: inline-block;
  margin-right: 10px;
}
</style>
<template>
  <div class="VehicleManagement">
    <div class="head-title">
      载体管理
      <!-- <el-button style="float:right;margin-top: -5px;" size="small" type="primary" @click="CommonJump('editVehicle')">
        新增载体</el-button> -->
       
      <div>
        <el-button
          @click="dialogVisible = true"
          style="float: right; margin-top: -25px"
          size="small"
          type="primary"
          >批量导出
        </el-button>
      </div>
      <div>
        <el-button
          type="primary"
          style="float: right; margin: -25px 10px 0px 0px"
          class="el-button--small"
          @click="CommonJump('editVehicle')"
          >新增载体</el-button
        >
      </div>
    </div>
    <div class="content">
      <div>
        <div class="searchInput" style="width: 250px; margin-bottom: 10px">
          <el-input
            @keyup.enter.native="(msg.pageIndex = 1), getList()"
            @clear="(msg.pageIndex = 1), getList()"
            style="display: inline-block; width: 225px; height: 30px"
            placeholder="项目名称"
            v-model="msg.CarrierName"
            size="small"
            clearable
          >
          </el-input>
          <span
            @click="(msg.pageIndex = 1), getList()"
            class="el-icon-search"
            style="
              color: #979dad;
              font-size: 14px;
              position: relative;
              top: 1px;
            "
          ></span>
        </div>
        <div class="searchInput" style="width: 250px; margin-bottom: 10px">
          <el-input
            @keyup.enter.native="(msg.pageIndex = 1), getList()"
            @clear="(msg.pageIndex = 1), getList()"
            style="display: inline-block; width: 225px; height: 30px"
            placeholder="开发商"
            v-model="msg.Developers"
            size="small"
            clearable
          >
          </el-input>
          <span
            @click="(msg.pageIndex = 1), getList()"
            class="el-icon-search"
            style="
              color: #979dad;
              font-size: 14px;
              position: relative;
              top: 1px;
            "
          ></span>
        </div>
        <div class="searchInput" style="width: 250px; margin-bottom: 10px">
          <el-input
            @keyup.enter.native="(msg.pageIndex = 1), getList()"
            @clear="(msg.pageIndex = 1), getList()"
            style="display: inline-block; width: 225px; height: 30px"
            @keyup.native="checkInteger(msg, 'MetroNum')"
            placeholder="地铁线路"
            v-model="msg.MetroNum"
            size="small"
            clearable
          >
          </el-input>
          <span
            @click="(msg.pageIndex = 1), getList()"
            class="el-icon-search"
            style="
              color: #979dad;
              font-size: 14px;
              position: relative;
              top: 1px;
            "
          ></span>
        </div>
        <div class="searchInput" style="width: 250px; margin-bottom: 10px">
          <el-input
            @keyup.enter.native="(msg.pageIndex = 1), getList()"
            @clear="(msg.pageIndex = 1), getList()"
            style="display: inline-block; width: 225px; height: 30px"
            placeholder="地铁站名称"
            v-model="msg.MetroName"
            size="small"
            clearable
          >
          </el-input>
          <span
            @click="(msg.pageIndex = 1), getList()"
            class="el-icon-search"
            style="
              color: #979dad;
              font-size: 14px;
              position: relative;
              top: 1px;
            "
          ></span>
        </div>
        <div class="searchInput" style="width: 200px; margin-bottom: 10px">
          <el-select size="small" v-model="msg.UserId" :filter-method="ChangeListName" filterable  @change="(msg.pageIndex = 1), getList()"
            placeholder="请选择">
            <el-option label="不限" :value="0"></el-option>
            <el-option v-for="item in userList" :key="item.Id" :label="item.Name" :value="item.Id">
            </el-option>
          </el-select>
        </div>
        <el-date-picker
          class="indataPicker"
          type="daterange"
          v-model="dateStr"
          range-separator="至"
          start-placeholder="开业日期"
          end-placeholder="开业日期"
          size="small"
          @change="getList"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <el-table
        :data="tableData"
        v-loading="loading"
        border
        style="width: 100%; margin: 20px 0"
      >
        <el-table-column prop="CarrierName" width="200" label="项目名称">
        </el-table-column>
        <el-table-column prop="CarrierMetroList" label="地铁信息" width="200">
          <template slot-scope="scope">
            <div
              v-for="(item, index) in scope.row.CarrierMetroList"
              :key="index"
              class="CarrierList"
            >
              <span>{{ item.MetroNum }}号线</span
              ><span>{{ item.MetroName }}</span
              ><span>{{ item.Distance }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="Logo" width="100" label="logo">
          <template slot-scope="scope">
            <el-image
              :src="scope.row.Logo"
              style="width: 50px"
              :preview-src-list="scope.row.LogoList"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="Address" width="200" label="项目地址">
        </el-table-column>
        <el-table-column prop="Developers" width="200" label="开发商">
        </el-table-column>
        <el-table-column prop="OpenTime" width="180" label="开业时间">
        </el-table-column>
        <el-table-column prop="ProjectType" label="项目类型">
          <template slot-scope="scope">
            {{ getProject(scope.row.ProjectType) }}
          </template>
        </el-table-column>
        <el-table-column prop="CarrierSize" label="商业体量"> </el-table-column>
        <el-table-column prop="LayersNum" width="150" label="商业层数"></el-table-column>
        <el-table-column prop="UserName" width="100" label="认证用户"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="修改"
              placement="top"
            >
              <img
                @click="CommonJump('editVehicle', { ID: scope.row.ID })"
                src="../../assets/img/userman/edit.png"
                alt=""
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
            >
              <img
                @click="delManage(scope.row)"
                src="../../assets/img/userman/del.png"
                alt=""
              />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="text-align: right"
        background
        @current-change="handleCurrentChange"
        :page-size="msg.pageSize"
        :current-page.sync="msg.pageIndex"
        layout="total,prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 选择导出信息 -->
    <el-dialog title="选择导出信息" :visible.sync="dialogVisible" width="960px">
      <el-form
        style="border: 1px solid #f0f2f7"
        :model="addMsg"
        ref="addMsg"
        label-width="100px"
      >
        <div
          style="
            box-sizing: border-box;
            background-color: #f3f5f6;
            width: 100%;
            padding-left: 20px;
            height: 50px;
            line-height: 50px;
          "
        >
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选
          </el-checkbox>
        </div>
        <div style="margin: 15px 0"></div>
        <div style="padding: 10px 25px 20px">
          <el-checkbox-group
            v-model="checkedCities"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox
              style="margin-bottom: 10px; width: 135px"
              v-for="city in cities"
              :label="city.Id"
              :key="city.Name"
            >
              {{ city.Name }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
      </el-form>
      <div style="text-align: right; margin-top: 20px">
        <el-button size="small" type="primary" @click="Export">导出</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: {
        MetroName: "", //地铁站名称
        pageIndex: 1,
        pageSize: 15,
        CarrierName: "", //载体名称
        MetroNum: "", //地铁线路
        Developers: "", //开发商
        StartOpenTime: "", //开业开始时间
        EndOpenTime: "", //	开业截止时间
        ExcelEnumIds: [],
        UserId:0,
      },
      usermsg: {
            pageIndex: 1,
            pageSize: 20,
            Name: '',
            Source: 0,
            MemberGrade: 0,
            Id: 0,
            Moblie: ''
      },
      userList:[],
      addMsg: {},
      dialogVisible: false,
      dateStr: [], //日期
      total: 0,
      tableData: [], //数据列表
      isShowAdd: false, //新增修改载体
      ProjectTypeList: [], //项目类型
      checkAll: false,
      checkedCities: [],
      cities: [],
      cityOptions: [],
      isIndeterminate: false,
    };
  },
  created() {
    this.getList();
    this.getTypeEnumList();
    this.getDown();
    this.getuserList()
  },
  methods: {
    ChangeListName(val) {
        this.usermsg.Name = val;
        this.getuserList();
    },
    getuserList() {
        this.apipost("/api/user/GetMemberUserDropDownList", this.usermsg, res => {
        if (res.data.resultCode == 1) {
            let pageData = res.data.data.pageData;
            this.userList = pageData;
        }
        })
    },
    getList() {
      this.loading = true;
      if (this.dateStr && this.dateStr.length > 0) {
        this.msg.StartOpenTime = this.dateStr[0];
        this.msg.EndOpenTime = this.dateStr[1];
      } else {
        this.msg.StartOpenTime = "";
        this.msg.EndOpenTime = "";
      }
      this.apipost("/api/Trade/GetCarrierPageList", this.msg, (res) => {
        this.loading = false;
        if (res.data.resultCode == 1) {
          this.total = res.data.data.count;
          let pageData = res.data.data.pageData;
          this.tableData = pageData;
          this.tableData.forEach((x) => {
            x.LogoList = [];
            x.LogoList.push(x.Logo);
          });
        }
      });
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    Export() {
      this.msg.ExcelEnumIds = this.checkedCities;
      let msg = JSON.parse(JSON.stringify(this.msg));
      if (!msg.Id || msg.Id == "") {
        msg.Id = 0;
      }
      this.GetLocalFile(
        "/api/Trade/GetCarrierListToExcel",
        msg,
        "载体信息.xls",
        null,
        () => {
          this.checkedCities = [];
        }
      );
    },
    getDown() {
      this.cityOptions = [];
      this.apipost("/api/Trade/GetCarrierExportEnumList", {}, (res) => {
        this.cities = res.data.data;
        let data = res.data.data;
        data.forEach((item) => {
          this.cityOptions.push(item.Id);
        });
      });
    },

    //删除
    delManage(obj) {
      let that = this;
      that.Confirm("是否删除?", function () {
        that.apipost(
          "/api/Trade/RemoveCarrier",
          {
            CarrierId: obj.ID,
            Status: 1,
          },
          (res) => {
            if (res.data.resultCode == 1) {
              that.Success(res.data.message);
              that.getList();
            } else {
              that.Error(res.data.message);
            }
          }
        );
      });
    },
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
    //获取项目类型
    getTypeEnumList() {
      this.apipost("/api/Trade/GetProjectTypeEnumList", {}, (res) => {
        if (res.data.resultCode == 1) {
          this.ProjectTypeList = res.data.data;
        }
      });
    },

    //获取项目类型
    getProject(type) {
      let str = "";
      this.ProjectTypeList.forEach((x) => {
        if (x.Id == type) {
          str = x.Name;
        }
      });
      return str;
    },
  },
  mounted() {},
};
</script>
<style>
.VehicleManagement .content .searchInput {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.VehicleManagement .content .searchInput .el-input__inner {
  border: none;
  outline: none;
  height: 30px;
  line-height: 30px;
}

.VehicleManagement .content .searchInput {
  line-height: normal;
  display: inline-table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  width: 250px;
  margin-right: 20px;
}

.VehicleManagement .content {
  background: #fff;
  margin-top: 10px;
  padding: 20px;
  box-sizing: border-box;
}
</style>
