<template>
  <div class="admin-refresh">
    <div class="section-search">
      <el-form ref="searchFrom" :model="searchFrom" inline size="small">
        <el-form-item>
          <el-input v-model="searchFrom.user_id" style="width: 120px" placeholder="用户ID" clearable @change="getList"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchFrom.receive_mobile" style="width: 160px" placeholder="收货人手机号" clearable @change="getList"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select filterable v-model="searchFrom.goods_type" placeholder="货品类型" clearable style="width: 120px" @change="getList">
            <el-option label="订单货品" value="0"></el-option>
            <el-option label="赠品" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item clearable>
          <el-date-picker
            v-model="searchFrom.send_at"
            type="date"
            placeholder="发货时间"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchFrom.express_no" placeholder="快递单号"></el-input>
        </el-form-item>
        <!--<el-form-item>
          <el-select filterable v-model="searchFrom.status" placeholder="物流状态" clearable style="width: 120px" @change="getList">
            <el-option label="待发货" value="0"></el-option>
            <el-option label="已发货" value="1"></el-option>
          </el-select>
        </el-form-item>-->

        <el-form-item>
          <div class="search-btn-wrapper">
            <el-button type="primary" plain @click="getList">搜索</el-button>
            <!--<el-button v-if="!$store.state.readonly" type="primary" plain @click="downLoad()">excel模板下载</el-button>-->
            <!--<el-button type="warning" plain v-if="$store.state.import">导入</el-button>-->
            <el-upload
              style="margin-left: 10px;"
              v-if="$store.state.import"
              :show-file-list="false"
              :onSuccess="fileSuccess"
              :headers="uploadHeader"
              :data="{param_token:param_token}"
              accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
              action="/api/admin/deliver/once/import">
              <el-button type="warning" plain>导入发货信息</el-button>
            </el-upload>
            <el-button style="margin-left: 10px;" type="success" plain @click="exportTable" v-if="$store.state.export">导出</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <el-tabs v-model="searchFrom.status" type="card" @tab-click="handleClick" style="background-color: #fff">
      <el-tab-pane label="所有" name="2"></el-tab-pane>
      <el-tab-pane label="待发货" name="0"></el-tab-pane>
      <el-tab-pane label="已发货" name="1"></el-tab-pane>
    </el-tabs>

    <el-table :data="deliverList" size="mini" style="width: 100%">
      <el-table-column width="200" class="f-c" label="用户">
        <template slot-scope="scope">
          <img v-if="scope.row.user_avatar" style="vertical-align: top" class="avatar" :src="scope.row.user_avatar"/>
          <span v-else class="avatar" style="display: inline-block;text-align: center;font-size: 12px;line-height: 50px;color: #999999;border: solid 1px #ccc;vertical-align: top">无头像</span>
          <span style="display: inline-block;vertical-align: top">
            {{scope.row.user_nickname}}
            <br v-if="scope.row.user_nickname"/>
            (ID:{{scope.row.user_id}})
            <br/>
            手机：{{scope.row.user_mobile}}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="收货地址">
        <template slot-scope="scope">
          {{scope.row.receive_name}}
          <br/>
          {{scope.row.receive_mobile}}
          <br/>
          {{scope.row.receive_address}}
        </template>
      </el-table-column>
      <el-table-column prop="goods_title" label="商品名"></el-table-column>
      <el-table-column label="货品类型" width="80px">
        <template slot-scope="scope">
          {{scope.row.goods_type == 0 ? '订单货品' : (scope.row.goods_type == 1 ? '赠品' : '')}}
        </template>
      </el-table-column>
      <el-table-column prop="updated_at" label="最后更新" width="95px">
        <template slot-scope="scope">
          <span v-html="transDate(scope.row.updated_at)"></span>
        </template>
      </el-table-column>
      <el-table-column prop="deliver_at" label="发货时间" width="100px"></el-table-column>
      <el-table-column prop="status" label="物流状态">
        <template slot-scope="scope">
          <template v-if="scope.row.status == 0">
            <div style="color: #e6a23c;">{{scope.row.status|LogisticsStatusFil}}</div>
          </template>
          <template v-else-if="scope.row.status == 1">
            <div style="color: #67c23a;">{{scope.row.status|LogisticsStatusFil}}</div>
          </template>
          <!--<template v-if="scope.row.status == 1">-->
          <template v-if="scope.row.express_name">{{scope.row.express_name}}：</template>
          <a v-if="scope.row.express_no" :href="`https://m.baidu.com/from=1013755s/s?word=${scope.row.express_no}&sa=tb&ts=2790568&t_kt=0&ie=utf-8&rsv_t=cbe2F%252FT5T3MIzkRl%252Fg8ZUw%252FEPHZmn2wHIrB8cLvgNlEKyyDqUNPrTyDEEDjkAb8&rsv_pq=11793168499026332712&ss=110000000001&tj=1&rqlang=zh&rsv_sug4=4111&inputT=3178&oq=快递单号查询`" target="_blank">{{scope.row.express_no}}</a>
          <!--</template>-->
        </template>
      </el-table-column>
      <el-table-column width="80" label="操作" v-if="!$store.state.readonly" fixed="right">
        <template slot-scope="scope">
          <el-button @click="editAddress(scope.row)" plain type="primary" size="mini">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <page :nowPage="nowPage" :total="total" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    <address-dialog :dialogObj="dialogObj" @reflash="onUpdateAddress"></address-dialog>
  </div>
</template>

<script>
  import page from "../framework/page";
  import md5 from "js-md5";
  import addressDialog from "./dialog";
  import receiveInfoDialog from "./receiveInfoDialog";
  import Cookie from '../../util/cookie'
  import CommonJs from '../../util/common';
  import { getDisposableApi, exportExcelApi } from "../../service/api";
  import {LogisticsStatus, GOODSTYPE} from "../../util/wordbook";

  export default {
    name: "index",
    components: {
      page,
      addressDialog,
      receiveInfoDialog
    },
    data() {
      let singjson = {
        sing: "singsingenglish21000"
      };
      return {
        dialogObj: {
          show: false
        },
        showFlag: false,
        adressDialog: false,
        searchFrom: {
          user_id: "",
          theme_id: "",
          periods_id: "",
          type: "2",
          status: "2",
          send_at: '',
          express_no: '',
          receive_mobile: ''
        },
        nowPage: 1,
        total: 0,
        limit: 10,
        deliverList: [],
        selectedGoods: [],
        secGoods: [],
        periodsId: null,
        goods_id: null,
        goodsList: [],
        themeList: [],
        uploadHeader: {token: Cookie.get('cc_token')},
        param_token: CommonJs.md5Code(),
        logisticsType: [
          {value: "0", name: "当前待发货 "},
          {value: "1", name: "所有待发货 "},
          {value: "2", name: "所有已发货 "}
        ]
      };
    },
    filters: {
      LogisticsStatusFil(val) {
        return LogisticsStatus[val];
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      transDate(string) {
        return CommonJs.formatDateString(string)
      },
      cancelEvent() {
        this.showFlag = false;
      },
      sureEvent() {
        this.showFlag = false;
      },
      handleClick(tab) {
        //this.searchFrom.type = tab.name;
        this.getList();
      },
      editAddress(row) {
        console.log(row);
        //if (row.status == 1) {
        this.dialogObj.express_no = row.express_no;
        this.dialogObj.express_name = row.express_name;
        this.dialogObj.status = row.status;
        //}
        this.dialogObj.receive_address = row.receive_address;
        this.dialogObj.receive_mobile = row.receive_mobile;
        this.dialogObj.receive_name = row.receive_name;
        this.dialogObj.id = row.id;
        this.dialogObj.show = true;
      },
      onUpdateAddress() {
        this.dialogObj.show = false;
        this.getList();
      },
      fileSuccess() {
        this.$message({
          message: "提交成功，请稍后刷新",
          type: "success"
        });
        this.getList();
      },
      init() {
        this.getList();
      },
      exportTable() {
        let json = {};
        if (this.searchFrom.user_id) {
          json.user_id = this.searchFrom.user_id;
        }
        if (this.searchFrom.status && this.searchFrom.status != '2') {
          json.status = this.searchFrom.status;
        }
        if (this.searchFrom.goods_type) {
          json.goods_type = this.searchFrom.goods_type;
        }
        if (this.searchFrom.receive_mobile) {
          json.receive_mobile = this.searchFrom.receive_mobile;
        }

        exportExcelApi("/api/admin/user/deliver/once/export", json);
      },
      initQuery() {
        let _query = this.$route.query;
        if (_query && _query.goods_id && _query.periods_id) {
          this.goods_id = _query.goods_id;
          this.selectedGoods = [
            parseInt(_query.goods_id),
            parseInt(_query.periods_id)
          ];
          getPeriodsApi({goods_id: this.selectedGoods[0], limit: 100}).then(
            res => {
              res.list.forEach(i => {
                i.name = i.title;
              });
              this.goodsList.find(i => {
                return i.id === this.selectedGoods[0];
              }).children = res.list;
              let nowGoods = this.goodsList.find(i => {
                return i.id === this.selectedGoods[0];
              });
              this.periods = nowGoods.children.find(i => {
                return i.id === this.selectedGoods[1];
              });
              console.log(this.periods);
            }
          );
        } else {
          getDefaultPeriodsApi().then(res => {
            console.log(res);
            //
            if (res) {
              this.goods_id = res.goods_id;
              this.selectedGoods = [parseInt(res.goods_id), parseInt(res.id)];
              getPeriodsApi({goods_id: this.selectedGoods[0], limit: 100}).then(
                res => {
                  res.list.forEach(i => {
                    i.name = i.title;
                  });
                  this.goodsList.find(i => {
                    return i.id === this.selectedGoods[0];
                  }).children = res.list;
                  let nowGoods = this.goodsList.find(i => {
                    return i.id === this.selectedGoods[0];
                  });
                  this.periods = nowGoods.children.find(i => {
                    return i.id === this.selectedGoods[1];
                  });
                  this.teacher_id = "";
                  console.log(this.periods);
                  // this.getClassList()
                }
              );
            }
          });
        }
        console.log(this.goodsList);
      },
      onPageChange(val) {
        // console.log(val)
        this.nowPage = val;
        this.getList();
      },
      onSizeChange(val) {
        this.limit = val;
        this.nowPage = 1;
        this.getList();
      },
      getList() {
        let json = {
          limit: this.limit,
          page: this.nowPage
        };
        if (this.searchFrom.user_id) {
          json.user_id = this.searchFrom.user_id;
        }
        if (this.searchFrom.status && this.searchFrom.status != '2') {
          json.status = this.searchFrom.status;
        }
        if (this.searchFrom.goods_type) {
          json.goods_type = this.searchFrom.goods_type;
        }
        if (this.searchFrom.send_at) {
          json.send_at = this.searchFrom.send_at ? this.searchFrom.send_at : '';
        }
        if (this.searchFrom.express_no) {
          json.express_no = this.searchFrom.express_no;
        }
        if (this.searchFrom.receive_mobile) {
          json.receive_mobile = this.searchFrom.receive_mobile;
        }
        getDisposableApi(json).then(res => {
          this.deliverList = res.list;
          this.total = res.total;
        });
      },
      reset() {
        this.searchFrom = {
          user_id: "",
          theme_id: "",
          periods_id: "",
          type: ""
        };
        this.getList();
      },
    }
  };
</script>

<style scoped>
  .sms {
    padding: 20px 0;
  }

  .avatar {
    width: 50px;
    min-width: 50px;
    margin-right: 10px;
    height: 50px;
    border-radius: 50%;
  }
</style>
<style>
  .userInfo > div {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
  }

  .f-c > .cell {
    display: flex !important;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
  }
</style>
