<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-size: 18px;font-weight: bold">任务1：好友添加</span>
          </div>
          <el-table
            border
            :data="task1List"
            align="center"
            :header-cell-style="{background:'#e4eff7'}"
          >
            <el-table-column prop="cur_date" label="时间" align="center"/>
            <el-table-column prop="total_add_teacher_num" label="当天进班人数" align="center"/>
            <el-table-column prop="done_num" label="未通过人数" align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="showTask1Detail(scope.row,1)"
                >{{scope.row.done_num}}</el-button>
              </template>
            </el-table-column>
            <el-table-column
              class-name="hightLight"
              prop="need_add_teacher_num"
              label="需加好友人数"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  style="font-size: 20px"
                  @click="showTask1Detail(scope.row)"
                >{{scope.row.need_add_teacher_num}}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="add_rate" label="完成情况" align="center" width="250">
              <template slot-scope="scope">
                <div>
                  <label style="width: 90px;display: inline-block;text-align: right">好友通过率：</label>
                  <el-progress
                    style="display: inline-block;width: 120px"
                    :text-inside="true"
                    :stroke-width="18"
                    :color="Number(scope.row.add_rate)<70?'#f00':'#67C23A'"
                    :percentage="Number(scope.row.add_rate)"
                  ></el-progress>
                </div>
                <div>
                  <label style="width: 90px;display: inline-block;text-align: right">任务处理率：</label>
                  <el-progress
                    style="display: inline-block;width: 120px"
                    :text-inside="true"
                    :stroke-width="18"
                    :color="Number(scope.row.done_rate) === 100?'#67C23A':'#f00'"
                    :percentage="Number(scope.row.done_rate)"
                  ></el-progress>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-size: 18px;font-weight: bold">附加任务:外部用户激活</span>
          </div>
          <el-table
            border
            :data="task6Obj && task6Obj.list ? [task6Obj] : []"
            align="center"
            :header-cell-style="{background:'#e4eff7'}"
          >
          <el-table-column prop="title" label="标题" align="center"></el-table-column>
            <el-table-column class-name="hightLight" prop="total" label="当日需激活人数" align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  style="font-size: 20px"
                  @click="showTask6Detail()"
                >{{scope.row.total}}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="into_periods_num" label="当日已激活人数" align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  style="font-size: 20px"
                  @click="showTask6Detail2()"
                >{{scope.row.into_periods_num}}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="total" label="激活率" align="center">
              <template slot-scope="scope">
                <el-progress
                  style="display: inline-block;width: 120px"
                  :text-inside="true"
                  :stroke-width="18"
                  :color="Number(scope.row.exec_rate)<70?'#f00':'#67C23A'"
                  :percentage="Number(scope.row.exec_rate)"
                ></el-progress>
              </template>
            </el-table-column>
          </el-table>
         <el-table
            border
            :show-header="false"
            :data="task7Obj && task7Obj.list ? [task7Obj] : []"
            align="center"
            :header-cell-style="{background:'#e4eff7'}"
          >
           <el-table-column prop="title" label="标题" align="center"></el-table-column>
            <el-table-column class-name="hightLight" prop="total" label="当日需激活人数" align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  style="font-size: 20px"
                  @click="showTask7Detail()"
                >{{scope.row.total}}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="into_periods_num" label="当日已激活人数" align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  style="font-size: 20px"
                  @click="showTask7Detail2()"
                >{{scope.row.into_periods_num}}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="total" label="激活率" align="center">
              <template slot-scope="scope">
                <el-progress
                  style="display: inline-block;width: 120px"
                  :text-inside="true"
                  :stroke-width="18"
                  :color="Number(scope.row.exec_rate)<70?'#f00':'#67C23A'"
                  :percentage="Number(scope.row.exec_rate)"
                ></el-progress>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog append-to-body :visible.sync="task7Show" title="外部渠道待激活列表" width="85%">
      <el-button @click="allDesc7()" size="mini" type="success">批量添加备注</el-button>
      <el-table
        border
        size="mini"
        :data="task7Obj && task7Obj.list ? task7Obj.list : []"
        @selection-change="handleSelectionChange123"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="宝宝昵称" align="center"></el-table-column>
        <el-table-column prop="telephone" label="手机号" align="center"></el-table-column>
        <el-table-column prop="goods_id" label="商品编号"></el-table-column>
        <el-table-column prop="source" label="来源"></el-table-column>
        <el-table-column prop="create_at" label="激活时间"></el-table-column>
        <el-table-column prop="status" width="260px" label="沟通状态">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.status"
              size="medium"
              @change="updateContact2(scope.row)"
            >
              <!-- <el-option label="已激活" :value="1"></el-option> -->
              <el-option label="假号" :value="2"></el-option>
              <el-option label="没兴趣" :value="3"></el-option>
              <el-option label="待激活" :value="0"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="desc" label="备注" align="center"></el-table-column>

        <el-table-column width="100" prop="desc" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              @click="editNote2(scope.row.id, scope.row.desc)"
              size="mini"
              plain
              type="primary"
            >编辑备注</el-button>
          </template>
        </el-table-column>
      </el-table>
      <page :total="total7" :limit="limit" @pageChange="onPageChange7" @sizeChange="onSizeChange7"/>
    </el-dialog>
    <el-dialog append-to-body :visible.sync="task6Show" title="外部订单待激活列表" width="85%">
      <el-button @click="allDesc6()" size="mini" type="success">批量添加备注</el-button>
      <el-table
        border
        size="mini"
        :data="task6Obj && task6Obj.list ? task6Obj.list : []"
        @selection-change="handleSelectionChange123"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="receiver_mobile" label="手机号" align="center"></el-table-column>
        <el-table-column prop="all_num" label="支付金额">
          <template slot-scope="scope">{{scope.row.money / 100}}元</template>
        </el-table-column>
        <el-table-column prop="goods_id" label="商品编号"></el-table-column>
        <el-table-column prop="invite_type" label="来源"></el-table-column>
        <el-table-column prop="created_at" label="导入时间"></el-table-column>
        <el-table-column prop="all_num" label="收货信息" width="150px">
          <template slot-scope="scope">
            姓名：{{scope.row.receiver_name}}
            <br>
            地址：{{scope.row.receiver_province}}{{scope.row.receiver_city}}{{scope.row.receiver_area}}{{scope.row.receiver_address}}
          </template>
        </el-table-column>
        <el-table-column prop="user_status" width="260px" label="沟通状态">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.user_status"
              size="medium"
              @change="updateContact(scope.row)"
            >
              <el-option label="手机号不是微信号" :value="1"></el-option>
              <el-option label="待通过" :value="2"></el-option>
              <el-option label="已加微信未激活" :value="3"></el-option>
              <el-option label="第一次电话无人接/挂断/关机" :value="4"></el-option>
              <el-option label="第二次电话无人接/挂断/关机" :value="5"></el-option>
              <el-option label="第三次电话无人接/挂断/关机" :value="6"></el-option>
              <el-option label="用户已拒绝" :value="7"></el-option>
              <el-option label="手机号是空号" :value="8"></el-option>
              <el-option label="待处理" :value="0"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="desc" label="备注" align="center"></el-table-column>

        <el-table-column width="100" prop="desc" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              @click="editNote(scope.row.id, scope.row.desc)"
              size="mini"
              plain
              type="primary"
            >编辑备注</el-button>
          </template>
        </el-table-column>
      </el-table>

      <page :total="total" :limit="limit" @pageChange="onPageChange6" @sizeChange="onSizeChange6"/>
    </el-dialog>
    <el-dialog append-to-body :visible.sync="task7Show2" title="外部渠道已激活列表" width="85%">
      <el-button @click="allDesc7()" size="mini" type="success">批量添加备注</el-button>
      <el-table
        border
        size="mini"
        :data="task7Obj && task7Obj.into_periods_list ? task7Obj.into_periods_list : []"
        @selection-change="handleSelectionChange123"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="宝宝昵称" align="center"></el-table-column>
        <el-table-column prop="telephone" label="手机号" align="center"></el-table-column>
        <el-table-column prop="goods_id" label="商品编号"></el-table-column>
        <el-table-column prop="source" label="来源"></el-table-column>
        <el-table-column prop="create_at" label="激活时间"></el-table-column>
        <el-table-column prop="desc" label="备注" align="center"></el-table-column>
        <el-table-column width="100" prop="desc" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              @click="editNote2(scope.row.id, scope.row.desc)"
              size="mini"
              plain
              type="primary"
            >编辑备注</el-button>
          </template>
        </el-table-column>
      </el-table>

      <page
        :total="into_periods_num7"
        :limit="limit"
        @pageChange="onPageChange7"
        @sizeChange="onSizeChange7"
      />
    </el-dialog>
    <el-dialog append-to-body :visible.sync="task6Show2" title="外部订单已激活列表" width="85%">
      <el-button @click="allDesc6()" size="mini" type="success">批量添加备注</el-button>
      <el-table
        border
        size="mini"
        :data="task6Obj && task6Obj.into_periods_list ? task6Obj.into_periods_list : []"
        @selection-change="handleSelectionChange123"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="用户" class="f-c" min-width="180" prop="user_id">
          <template slot-scope="scope">
            <img
              :src="scope.row.avatar"
              style="width: 40px;min-width:40px;height: 40px;border-radius: 50px"
            >
            {{scope.row.nickname}}(ID:{{scope.row.user_id}})
          </template>
        </el-table-column>

        <el-table-column prop="receiver_mobile" label="手机号" align="center"></el-table-column>
        <el-table-column prop="all_num" label="支付金额">
          <template slot-scope="scope">{{scope.row.money / 100}}元</template>
        </el-table-column>
        <el-table-column prop="goods_id" label="商品编号"></el-table-column>
        <el-table-column prop="periods_id" label="期数"></el-table-column>
        <el-table-column prop="invite_type" label="来源"></el-table-column>
        <el-table-column prop="periods_title" label="期数名称"></el-table-column>
        <el-table-column prop="created_at" label="导入时间"></el-table-column>
        <el-table-column prop="active_at" label="激活时间"></el-table-column>

        <el-table-column prop="all_num" label="收货信息" width="150px">
          <template slot-scope="scope">
            姓名：{{scope.row.receiver_name}}
            <br>
            地址：{{scope.row.receiver_province}}{{scope.row.receiver_city}}{{scope.row.receiver_area}}{{scope.row.receiver_address}}
          </template>
        </el-table-column>
        <el-table-column prop="desc" label="备注" align="center"></el-table-column>

        <el-table-column width="100" prop="desc" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              @click="editNote(scope.row.id, scope.row.desc)"
              size="mini"
              plain
              type="primary"
            >编辑备注</el-button>
          </template>
        </el-table-column>
      </el-table>

      <page
        :total="into_periods_num"
        :limit="limit"
        @pageChange="onPageChange6"
        @sizeChange="onSizeChange6"
      />
    </el-dialog>

    <el-dialog
      append-to-body
      :visible.sync="task1Detail.show"
      :title="task1Detail.title"
      width="80%"
    >
      <el-table :data="task1Detail.list" size="mini" fixed>
        <el-table-column label="用户" class="f-c" min-width="180" prop="user_id">
          <template slot-scope="scope">
            <img
              :src="scope.row.avatar"
              style="width: 40px;min-width:40px;height: 40px;border-radius: 50px"
            >
            {{scope.row.nickname}}(ID:{{scope.row.user_id}})
            <br>
            Tel:{{scope.row.mobile}}
          </template>
        </el-table-column>
        <el-table-column label="期数" align="center">
          <template slot-scope="scope">【{{scope.row.periods_id}}】{{scope.row.periods_title}}</template>
        </el-table-column>
        <el-table-column label="是否添加老师" min-width="160" prop="is_add_teacher">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.is_add_teacher"
              size="mini"
              @change="changeAddTeacher(scope.row)"
            >
              <el-option label="老师主动添加" :value="1"></el-option>
              <el-option label="用户主动添加" :value="2"></el-option>
              <el-option label="待通过" :value="3"></el-option>
              <el-option label="手机号不是微信号" :value="4"></el-option>
              <el-option label="用户已拒绝" :value="5"></el-option>
              <el-option label="暂未处理" :value="0"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="desc" label="沟通情况" align="center">
          <template slot-scope="scope">
            <teacher-desc :row="scope.row" :descType="2" @onSuccess="refDesc1"></teacher-desc>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="入课时间" min-width="140px" align="center" sortable></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import teacherDesc from "../framework/teacherDesc";
import {
  task1Api,
  task6Api,
  task7Api,
  changeAddTeacherApi,
  multiApi,
  orderDescApi,
  updateContactApi,
  updateAdsStatusApi,
  updateAdsInnerPlApi
} from "../../service/api";
import page from "../framework/page";
import { USERSTATUS } from "../../util/wordbook";
export default {
  name: "task1",
  components: { teacherDesc, page },
  props: ["teacherId"],
  data() {
    return {
      false:false,
      task1List: [],
      task1Detail: {
        show: false,
        list: [],
        title: "",
        cur_date: ""
      },
      task6Show: false,
      task6Show2: false,
      task7Show: false,
      task7Show2: false,
      limit: 10,
      total: 0,
      total7:0,
      into_periods_num: 0,
      into_periods_num7: 0,
      nowPage: 1,
      task6Obj: null,
      selectedTask6: [],
      task7Obj: null,
      selectedTask7: []
    };
  },
  filters: {
    USERSTATUSType(value) {
      return USERSTATUS[value];
    }
  },
  mounted() {
    this.initPage();
  },
  methods: {
    updateContact(row) {
      updateContactApi({ids:row.id,user_status:row.user_status}).then(() => {
        this.$message({
          type: "success",
          message: "数据更改成功"
        });
        this.refDesc1();
      });
    },
    updateContact2(row){
        console.log(row)
        console.log(row.id)
        updateAdsStatusApi({ids:row.id,status:row.status}).then(res =>{
          this.$message({
            message: '更新成功',
            type: 'success'
          });
        })
      },
    handleSelectionChange123(x) {
      this.selectedTask6 = x;
      this.selectedTask7 = x;
    },
    editNote(id, desc) {
      this.$prompt("", "编辑备注", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputType: "textarea",
        inputValue: desc || ""
      }).then(({ value }) => {
        this.$confirm("确定保存?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          console.log(value)
          orderDescApi({ desc: value }, id).then(res => {
            this.$message({
              type: "success",
              message: "编辑备注成功"
            });
            this.selectedTask6 = [];
            this.getTask6();
            this.selectedTask7 = [];
            this.getTask7();
          });
        });
      });
    },
    editNote2(id, desc) {
      this.$prompt("", "编辑备注", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputType: "textarea",
        inputValue: desc || ""
      }).then(({ value }) => {
        this.$confirm("确定保存?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          console.log(value)
          updateAdsInnerPlApi({ids:id,desc:value}).then(res => {
            this.$message({
              type: "success",
              message: "编辑备注成功"
            });
            this.selectedTask6 = [];
            this.getTask6();
            this.selectedTask7 = [];
            this.getTask7();
          });
        });
      });
    },
    allDesc6() {
      if (this.selectedTask6.length < 1) {
        this.$message({
          type: "error",
          message: "请先选择用户"
        });
      } else {
        this.$prompt("请输入沟通内容", "备注", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputType: "textarea"
        }).then(({ value }) => {
          let ids = [];
          this.selectedTask6.forEach(i => {
            ids.push(i.id);
          });
          let json = {
            ids: ids.join(),
            desc: value
          };
          multiApi(json).then(res => {
            this.$message({
              type: "success",
              message: "批量添加备注成功"
            });
            this.selectedTask6 = [];
            this.getTask6();
          });
        });
      }
    },
    allDesc7() {
      if (this.selectedTask7.length < 1) {
        this.$message({
          type: "error",
          message: "请先选择用户"
        });
      } else {
        this.$prompt("请输入沟通内容", "备注", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputType: "textarea"
        }).then(({ value }) => {
          let ids = [];
          this.selectedTask7.forEach(i => {
            ids.push(i.id);
          });
          console.log(ids)
          let json = {
            ids: ids.join(','),
            desc: value
          };
          updateAdsInnerPlApi(json).then(res => {
            this.$message({
              type: "success",
              message: "批量添加备注成功"
            });
            this.selectedTask7 = [];
            this.getTask7();
          });
        });
      }
    },
    onPageChange6(val) {
      this.nowPage = val;
      this.getTask6();
    },
    onPageChange7(val) {
      this.nowPage = val;
      this.getTask7();
    },
    onSizeChange6(val) {
      this.limit = val;
      this.nowPage = 1;
      this.getTask6();
    },
    onSizeChange7(val) {
      this.limit = val;
      this.nowPage = 1;
      this.getTask7();
    },
    getTask6() {
      let json = {
        limit: this.limit,
        page: this.nowPage
      };
      task6Api(this.teacherId, json).then(res => {
        console.log(res);
        res.title = "外部订单用户"
        this.task6Obj = res;
        this.total = res.total;
        this.into_periods_num = res.into_periods_num;
      });
    },
    getTask7() {
      let json = {
        limit: this.limit,
        page: this.nowPage
      };
      task7Api(this.teacherId, json).then(res => {
        console.log(res,618);
        res.title = "外部渠道用户"
        this.task7Obj = res;
        this.total7 = res.total;
        this.into_periods_num7 = res.into_periods_num;
      });
    },
    initPage() {
      this.nowPage = 1;
      task1Api(this.teacherId).then(res => {
        this.task1List = res;
      });
      this.getTask6();
      this.getTask7();
      // debugger
    },
    objectSpanMethod(data) {
      if (data.columnIndex === 5) {
        return {
          rowspan: this.task1List.length,
          colspan: 1
        };
      } else {
        return {
          rowspan: 1,
          colspan: 1
        };
      }
    },
    showTask6Detail() {
      this.nowPage = 1;
      this.task6Show = true;
    },
    showTask6Detail2() {
      this.nowPage = 1;
      this.task6Show2 = true;
    },
    showTask7Detail() {
      this.nowPage = 1;
      this.task7Show = true;
    },
    showTask7Detail2() {
      this.nowPage = 1;
      this.task7Show2 = true;
    },
    refDesc1() {
      task1Api(this.teacherId).then(res => {
        this.task1List = res;
        res.forEach(i => {
          if (i.cur_date === this.task1Detail.cur_date) {
            console.log(this.task1Detail);
            this.task1Detail.list =
              this.task1Detail.indexOf("未通过用户列表") < -1
                ? i.done_detail
                : i.need_add_detail;
          }
        });
      });
    },
    changeAddTeacher(data) {
      changeAddTeacherApi(data.id, data.is_add_teacher).then(() => {
        this.$message({
          type: "success",
          message: "数据更改成功"
        });
        this.refDesc1();
      });
    },
    showTask1Detail(data, type) {
      this.task1Detail = {
        show: true,
        list: type ? data.done_detail : data.need_add_detail,
        title: type
          ? data.cur_date + " 未通过用户列表"
          : data.cur_date + " 待加好友用户列表",
        cur_date: data.cur_date
      };
      this.dialogType = 1;
    }
  }
};
</script>

<style scoped>
</style>
