<template>
  <div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
    <div v-if="!oneCampsiteDialogVisible">
      <div class="filter-container" ref="filter-container">
        <el-form ref="queryForm" :inline="inline" :model="listQuery" label-width="100px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="名称">
                <el-input v-model.number="listQuery.name" placeholder="请输入名称"></el-input>
              </el-form-item>
            </el-col>
            <!--<el-col :span="8">-->
            <!--<el-form-item label="时间">-->
            <!--<el-date-picker-->
            <!--v-model="listQuery.startTime"-->
            <!--type="date"-->
            <!--clearable-->
            <!--placeholder="选择日期">-->
            <!--</el-date-picker>~-->
            <!--<el-date-picker-->
            <!--v-model="listQuery.endTime"-->
            <!--type="date"-->
            <!--clearable-->
            <!--placeholder="选择日期">-->
            <!--</el-date-picker>-->
            <!--</el-form-item>-->
            <!--</el-col>-->
          </el-row>
        </el-form>
        <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
        <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate"
                   type="primary" icon="edit">添加
        </el-button>
      </div>
      <el-table :key='tableKey' :data="list" border fit highlight-current-row
                style="width: 1367px;">
        <el-table-column
          type="index"
          align="center" label="序号" width="65">
        </el-table-column>
        <el-table-column width="200" align="center" label="名称">
          <template scope="scope">
            <img :src="scope.row.cover" style="width: 30px;"/>
            <span>{{scope.row.name}}</span>
          </template>
        </el-table-column>

        <el-table-column width="300" align="center" label="类型">
          <template scope="scope">
            <span>{{scope.row.storeTypeName}}</span>
          </template>
        </el-table-column>

        <el-table-column width="200" align="center" label="热度">
          <template scope="scope">
            <span>{{scope.row.hot}}</span>
          </template>
        </el-table-column>

        <el-table-column width="300" align="center" label="创建时间">
          <template scope="scope">
            <span>{{scope.row.crtTimeStr}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="300" label="操作">
          <template scope="scope">
            <el-button size="small" type="success" @click="handleUpdate(scope.row)">编辑
            </el-button>
            <el-button size="small" type="primary" v-if="scope.row.saleState==2|| scope.row.saleState==0" @click="upStatus(scope.row)">上架
            </el-button>
            <el-button size="small" type="warn" v-if="scope.row.saleState==1" @click="upStatus(scope.row)">下架
            </el-button>
            <el-popover
              ref="popover5"
              placement="top"
              width="160"
              v-model="scope.row.visible2">
              <p>确定删除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="scope.row.visible2 = false">取消</el-button>
                <el-button type="primary" size="mini" @click="deleteHandler(scope.row)">确定</el-button>
              </div>
            </el-popover>
            <el-button type="danger" size="small" v-popover:popover5>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-show="!listLoading" class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
                       layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import 'static/css/uploadImg.css';// 引入图片上传组件对话框

  import {
    formatDate
  } from 'utils/dateFormattor';

  import {
    toEast8Date,
    deepCopyDate,
    newEast8Date,
    convertDate2Str,
    timestamp2Date
  } from 'utils/dateUtils';

  import rsCode from '../../utils/rsCode';

  import {mapGetters} from 'vuex';
  import {
    getToken
  } from 'utils/auth';
  import {
    getCampsiteList,
    delCampsiteShop,
    saleStatus
  } from 'api/campsiteManage';
  import Element1 from "../admin/menu/components/element";
  import ElRow from "element-ui/packages/row/src/row";
  import ElCol from "element-ui/packages/col/src/col";

  export default {
    name: 'tourManage',
    components: {
      ElCol,
      ElRow,
      Element1,
    },
    data() {
      return {
        modalTitle: "创建",
        BASE_API: process.env.BASE_API,
        oneCampsiteDialogVisible: false,//添加、编辑弹框
        showLoadingBody: false,
        form: {
          tagNames:"",//标签
          name: undefined,//旅游名称
          saleCount: undefined,//销量
          stock: undefined,//总数量
        },
        list: null,
        total: null,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20,
          startTime: undefined,
          endTime:undefined,
          name: '',//关键词
        },
        inline: true,
        textMap: {
          update: '编辑',
          create: '创建'
        },
        tableKey: 0
      }
    },
    created() {
      this.getList();
    },
    computed: {
      ...mapGetters([
        'elements'
      ])
    },
    methods: {
      /**
       * 添加
       * */
      handleCreate() {
        this.resetTemp();
        this.oneRow = {};
        this.modalTitle = '创建';
        this.oneCampsiteDialogVisible = true;
      },
      /**
       * 操作-删除
       * */
      deleteHandler(row) {
        delCampsiteShop(row.id).then(response => {
          if (response.status === 200) {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            });
            this.oneCampsiteDialogVisible = false;
            this.getList();
          } else {
            this.$notify({
              title: '删除失败',
              message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
              type: 'error',
              duration: 2000
            });
          }
        });
      },
      /**
       * 上架、下架  参数 id status 1-上架；2-下架  post
       */
      upStatus(row){
        let params = {
          id: row.id,
          status: row.saleState==1?2:1
        };
        saleStatus(params).then(response => {
          if (response.status === 200) {
            this.$notify({
              title: '成功',
              message: '成功',
              type: 'success',
              duration: 2000
            });
            this.oneCampsiteDialogVisible = false;
            this.getList();
          } else {
            this.$notify({
              title: '失败',
              message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
              type: 'error',
              duration: 2000
            });
          }
        });
      },
      /**
       * 编辑
       * */
      handleUpdate(row) {
        this.modalTitle = '编辑';
        this.oneRow = row;
        this.oneCampsiteDialogVisible = true;
      },
      /**
       * 下架
       * */
      undercarriageHandler(row) {
        // open dialog
        this.departureDialogVisible = true;
        this.clearDepartureForm();
        let that = this;
        let selectArry = [];
        this.allCompaniesArr.map(function(item){
          item.value = item.name;
          selectArry.push(item);
        });
        this.departureForm.mileage = row.mileage;
        this.departureForm.expectArrivalBranchCompanyId = row.subordinateBranch;
        this.departureForm.departureBranchCompanyId = row.subordinateBranch;
        selectArry.map(function (iitem) {
          if( row.subordinateBranch == iitem.id){
            that.departureForm.departureBranchCompanyName = iitem.name;
            that.departureForm.expectArrivalBranchCompanyName = iitem.name;
          }
        });
        this.departureForm.vehicleId = row.id;
        this.departureForm.numberPlate = row.numberPlate;
        this.departureForm.departureDate = Date();
      },
      /**
       * 旅游modal传递回来的数据
       * */
      oneCampsiteDialogEvent(e){
        this.oneCampsiteDialogVisible = false;
        if(!e){//关闭编辑
          this.oneCampsiteDialogVisible = e;
        } else if(e){
          //编辑成功-重新加载列表
          this.getList();
        }
      },
      /**
       * 获取旅游列表
       * */
      getList() {
        this.listLoading = true;
        if(this.listQuery.startTime){
          this.listQuery.startTime = this.listQuery.startTime.getTime();
        }
        if(this.listQuery.endTime){
          this.listQuery.endTime = this.listQuery.endTime.getTime();
        }
        getCampsiteList(this.listQuery).then(response => {
          let totalCountRs = undefined;
          let listRs = undefined;
          if (!this.$utils.isEmpty(response.data.data) && this.$utils.isInteger(response.data.totalCount)) {
            listRs = response.data.data;
            totalCountRs = response.data.totalCount;
            listRs.map(function(item){
              item.visible2 = false;
              item.crtTimeStr = timestamp2Date(item.crtTime);
              if(item.storeTypeName){
                item.storeTypeName = item.storeTypeName.join("|");
              }
            });
          }
          this.listLoading = false;
          this.list = listRs;
          this.total = totalCountRs;
        })

      },
      getAddrStr(branchCompany) {
        let regions = getRegionByCodes([branchCompany.addrProvince, branchCompany.addrCity, branchCompany.addrTown]);
        let address = [];
        for(let i = 0; i < regions.length; i++){
          address.push(regions[i].name);
        }
        return address.join(" ");
//        return regions[0].name + ' ' + regions[1].name + ' ' + regions[2].name + ' ';
      },
      handleFilter() {
        this.listQuery.page = 1;
        this.$refs.queryForm.validate(valid => {
          if (valid) {
            this.getList();
          } else {
            return false;
          }
        });
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },


      /**
       * 操作-申请预定
       * */
      handleApply(row) {
        this.resetTemp4Apply();
        let that = this;
        let selectArry = [];
        this.allCompaniesArr.map(function(item){
          item.value = item.name;
          selectArry.push(item);
        });
        this.form4Apply.liftCompany = row.subordinateBranch;
        selectArry.map(function (iitem) {
          if( row.subordinateBranch == iitem.id){
            that.form4Apply.state3 = iitem.name;
          }
        });
        this.form4Apply.vehicle = row.id;
        getBookedInfoIn2Month(row.id)
          .then(response => {
            this.curBookedInfo3Month = response.data;
            this.dialogStatus = 'apply';
            this.dialogForm4ApplyVisible = true;
          });
      },
      handleBookInfo(row) {
        this.$refs.bookInfoViewer.handleBookInfo(row.id);
      },
      create(formName) {
        const set = this.$refs;
        if(!this.form.state2 || this.form.state2 == "全部"){
          this.form.subordinateBranch = undefined;
          this.$notify({
            title: '失败',
            message: '请选择分公司',
            type: 'warning',
            duration: 2000
          });
          return;
        }
        set[formName].validate(valid => {
          if (valid) {
            let formTemp = this.fillDateRange2Object(this.form, 'insuranceDateRange4form', 'insuranceStartDate', 'insuranceEndDate');
            convertDate2Str(formTemp);
            addObj(formTemp)
              .then(response => {
                if (response.code === rsCode.RS_CODE_SUC) {
                  this.dialogFormVisible = false;
                  this.getList();
                  this.$notify({
                    title: '成功',
                    message: '创建成功',
                    type: 'success',
                    duration: 2000
                  });
                  this.getList();
                } else {
                  this.$notify({
                    title: '失败',
                    message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
                    type: 'error',
                    duration: 2000
                  });
                }
              });
          } else {
            return false;
          }
        });
      },
      cancel(formName) {
        this.dialogFormVisible = false;
        this.dialogForm4ApplyVisible = false;
        this.$refs[formName].resetFields();
      },
      cancel4Apply(formName) {
        this.dialogForm4ApplyVisible = false;
        this.$refs[formName].resetFields();
      },
      update(formName) {
        const set = this.$refs;
        if(!this.form.state2 || this.form.state2 == "全部"){
          this.form.subordinateBranch = undefined;
          this.$notify({
            title: '失败',
            message: '请选择分公司',
            type: 'warning',
            duration: 2000
          });
          return;
        }
        set[formName].validate(valid => {
          if (valid) {
            let formTemp = this.fillDateRange2Object(this.form, 'insuranceDateRange4form', 'insuranceStartDate', 'insuranceEndDate');
            convertDate2Str(formTemp);
            putObj(formTemp).then(response => {
              if (response.code === rsCode.RS_CODE_SUC) {
                this.dialogFormVisible = false;
                this.getList();
                this.$notify({
                  title: '成功',
                  message: '更新成功',
                  type: 'success',
                  duration: 2000
                });
                this.getList();
              } else {
                this.$notify({
                  title: '失败',
                  message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
                  type: 'error',
                  duration: 2000
                });
              }
            });
          } else {
            return false;
          }
        });
      },
      /**
       * 申请预定-确定
       * @param formName
       */
      apply(formName) {
        if(!this.form4Apply.state3 || this.form4Apply.state3 == "全部"){
          this.form4Apply.liftCompany = undefined;
          this.$notify({
            title: '失败',
            message: '请选择提车分公司',
            type: 'warning',
            duration: 2000
          });
          return;
        }
        if(!this.form4Apply.state4 || this.form4Apply.state4 == "全部"){
          this.form4Apply.retCompany = undefined;
          this.$notify({
            title: '失败',
            message: '请选择还车分公司',
            type: 'warning',
            duration: 2000
          });
          return;
        }
        const set = this.$refs;
        set[formName].validate(valid => {
          if (valid) {
            this.dialogFormVisible = false;
            book(this.form4Apply).then(() => {
              this.dialogForm4ApplyVisible = false;
              this.getList();
              this.$notify({
                title: '成功',
                message: '预定成功',
                type: 'success',
                duration: 2000
              });
            });
          } else {
            return false;
          }
        });
      },
      resetTemp() {
        this.form = {
          tagNames:"",//标签
          name: undefined,//旅游名称
          saleCount: undefined,//销量
          stock: undefined,//总数量
        };
      },
      resetTemp4Apply() {
        this.form4Apply = {
          bookStartDate: undefined,
          bookEndDate: undefined,
          state3: '',
          state4:'',
          retCompany: undefined,
          vehicle: undefined,
          selectedAccItem: undefined,
          liftCompany: undefined,
          liftAddr: undefined,
          destination: undefined,
          remark: undefined
        };
      },
      resetTemp4BookInfo() {
        this.form4BookInfo = {
          selectedMonth: this.$utils.toDateString(newEast8Date(), 'yyyy-MM'),
          vehicle: undefined
        };
      }
    }
  }
</script>
